jQueryで要素が特定のクラスをもつか判定する:hasClass()

hasclass() は要素が引数に指定したクラスをもっているかどうか判定するメソッドです。特定のクラスをもつ要素に対して処理を行うときに便利です。

hasclass() の使い方

hasclass() の記述方法は以下の通りです。

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

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

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

サンプル

以下は、ボタンを押すとそのボタンが指定したクラス名をもつか判定するサンプルです。

HTML

<p id="sample">判定</p>
<button name="sample" class="class1">Button1</button>
<button name="sample" class="class2">Button2</button>

jQuery

$('button[name=sample]').on('click', function () {
  if ($(this).hasClass('class1')) {
    $('#sample').text('True');
  } else {
    $('#sample').text('False');
  }
});

Button1 は class1 という名前のクラスをもっているので、hasClass() は true を返します。一方、Button2 は class1 という名前のクラスをもっていないので、hasClass() は false を返します。

判定


購読

平日・毎朝更新中