HTML・CSS</li> <li cl…"> jQueryのhasClassメソッドでclassの付与を判定 | BLOG|ホームページ制作 Brick Plan【ブリックプラン】

2022.08.25

jQuery

jQueryのhasClassメソッドでclassの付与を判定

jQueryのhasClassメソッドで要素にclassが付与されているか判定します。以下のhtmlの構造で確認します。

<ul>
  <li class="html css">HTML・CSS</li>
  <li class="sass">Sass</li>
  <li class="js">JavaScript</li>
</ul>

hasClassメソッドは引数にクラス名を指定します。classが存在する場合はtrue、存在しない場合はfalseを返すので、if文の条件分岐に利用できます。

$(function() {
  $("ul li").each(function() {
    if($('ul li').hasClass('js')) {
      console.log('classが存在します。');
    } else {
      console.log('classが存在しません。');
    }
  });
});

実行結果は以下になります。

classが存在しません。
classが存在しません。
classが存在します。

なお、2つのclassが付与された要素があるかチェックする場合は、以下のように引数のクラス名を半角スペースで区切って指定します。

$(function() {
  $("ul li").each(function() {
    if($('ul li').hasClass('html css')) {
      console.log('classが存在します。');
    } else {
      console.log('classが存在しません。');
    }
  });
});

実行結果は以下になります。

classが存在します。
classが存在しません。
classが存在しません。

ただしこの場合、引数の指定が「html css」ではなく「css html」だとfalseになります。文字列の順番が一致している場合のみtrueになるので注意が必要です。

関連記事

2020.10.15

jQuery

jQueryプラグイン jquery.matchHeight.jsの使い方

jQueryプラグイン、jquery.matchHeight.jsの使い方です。全てのページ共通で、以下のhtml構造でテストします。デモページではクラス名bo…

2020.10.19

jQuery

jQueryのイベントオブジェクトのメソッド(preventDefault・stopPropagation)

デモページはこちら jQueryのイベントオブジェクトのメソッドであるpreventDefaultとstopPropagationの動作をテストします。また、処…

2020.09.06

jQuery

jQueryで発生したエラーの対処法

コンソールでjQueryのエラーが発生した場合の対処法です。エラー発生の有無はjQueryのバージョンやfull版・slim版の違いによっても異なります。1系や…

2020.09.29

jQuery

PC表示でページの途中からスクロールに追従するナビゲーション

デモページはこちら PC表示の場合、ページの途中に配置したナビゲーションが画面の一番上に来たタイミングで固定され、スクロールに追従する動作を実装します。 ナビゲ…

2020.11.08

jQuery

プラグインを利用せずにjQueryで実装する高さ揃え

デモページはこちら jquery.matchHeight.jsのようなプラグインを利用せず、jQueryのみでhtml要素の高さ揃えを実装します。プラグイン利用…

上に戻る