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.11.08

jQuery

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

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

2020.09.22

jQuery

jQueryで子孫要素を取得(children・find)

デモページはこちら jQueryで子孫要素(子要素と子要素の子要素である孫要素)を取得するメソッドのまとめです。対象要素の子要素を全て取得するchildren、…

2020.09.23

jQuery

ページ最下部でトップへ戻るボタンを表示

デモページはこちら ユーザーがページ最下部までスクロールしたタイミングで、トップへ戻るボタンをフェードインで表示します。ボタンをクリックまたはページ最下部よりも…

2022.08.26

jQuery

jQueryで最初・最後の要素を取得(first・last)

jQueryのfirst・lastメソッドで最初・最後の要素を取得します。また、first・lastをセレクタとして使用します。以下のhtmlの構造で確認します…

2020.07.17

jQuery

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

jQueryプラグイン、jquery.cookie.jsの使い方です。まず前提としてcookieはhttp通信でサーバー側からクライアント側に渡されるため、ロー…

上に戻る