jQuery 「hasClass」要素にクラスが指定されているか調べる

.hasClass()メソッドは、引数として与えられたCSSクラスが、条件にマッチした要素に指定されているかどうかを、trueまたはfalseで返します。

書式

$( 対象要素 ).hasClass( クラス名 );

$('p').hasClass('myClass');

サンプル

クラスが指定されているか判定し、メッセージを切り替える

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <div class="sticky">
          <p>鮭おにぎり</p>
        </div>
        <div class="sticky">
          <p>のりおにぎり</p>
        </div>
        <div class="sticky">
          <p>梅干しおにぎり</p>
        </div>
        <div class="sticky">
          <p>タラコおにぎり</p>
        </div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        if($('div:last').hasClass('footer')){
          $('.footer').append('<p clss="desc">最後のdiv要素はfooterクラスが指定されています。');
        }else{
          $('.footer').append('<p clss="desc">最後のdiv要素はfooterクラスが指定されていません。');
        }
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery