【jQuery】要素が特定のクラスを持つか判定する

要素の引数に指定したクラスを持っているかどうかを判定するメソッドのメモ。

要素の引数に指定したクラスを持っているかどうかを判定するには hasclass() メソッドを使います。

特定のクラスをもつ要素に対して処理を行いたいときに使います。

hasclass() の記述方法は以下になります↓

jQueryオブジェクト.hasClass(クラス名);

引数には持っているかどうか調べたいクラス名を文字列で指定します。

注意としては、引数のクラス名に “.” を付けなくてもOKです。（私は”.”をつけてしまって「あれ？効かない？」ってシーンが多々あります笑）

引数で指定したクラス名を持っている場合は true を返し、もっていない場合は false を返します。

hasclass() の使い方のサンプル

サンプルとして if 文で書いてみましょう↓

$('button').on('click', ()=> {
  if ($(this).hasClass('hoge')) {
    // クラス「hoge」を持っていた場合の処理
  } else {
    // クラス「hoge」を持っていなかった場合の処理
  }
});

ボタン要素をクリックすると、そのクリックされたボタンが hoge というクラスを持っているかどうかで処理を分けています。

ちなみに、クラスを持っていない場合にのみ処理を加えたい場合は、

$('button').on('click', ()=> {
  if (!$(this).hasClass('hoge')) {
    // クラス「hoge」を持っていない場合の処理
  }
});

$(this) の前に “ !（論理否定） ” をつけてあげることで可能です。