特定のclassを持っているか判定【jQuery】

t-file

3年前

こんにちは、webエンジニア歴4年のtakaです。

この記事では特定のclassを持っているか持っていないかをjQueryで判定する方法を記載していきます。

特定のclassを持っているか判定方法

このようなHTMLがあります。

// HTML
<div class="wrapper main">
  <p>メイン</p>
</div>
<div class="wrapper sub">
  <p>サブ</p>
</div>

特定のclassを持っているか判定するにはこのように記載します。

// JavaScript
if ($(".wrapper").hasClass("main")) {
  // wrapperクラスを持つhtmlタグがmainクラスがある場合の処理
} else {
  // wrapperクラスを持つhtmlタグがmainクラスがない場合の処理
}

hasClassメソッドに記載する値は、クラス名なのでドットはいりません。注意してください。

× hasClass(“.main”)
○ hasClass(“main”)

aタグやbuttonで利用したい場合

このようなHTMLがある場合も

// HTML
<ul>
  <li><a href="・・・" class="link linkA">リンクA</a></li>
  <li><a href="・・・" class="link">リンクB</a></li>
  <li><a href="・・・" class="link">リンクC</a></li>
</ul>

同様にhasClassを利用できます。

// JavaScript
$(document).on("click",".link", function() { // linkというclassをクリックしたら
  if ($(this).hasClass("linkA")) { // この場合thisはクリックしたaタグ
    // linkAクラスを持つaタグがクリックされた時の処理
  } else {
    // linkAクラスを持つaタグ以外（リンクB・リンクC）がクリックされた時の処理
  }
});

tips!

onメソッドの最後にreturn: false;を記載すると、href属性に入力したページに遷移しなくなるよ。

// JavaScript
$(document).on("click",".link", function() {
  if ($(this).hasClass("linkA")) {
    
  } else {
   　
  }
  return: false; // これを追加！
});