jQueryで特定のclassが存在するかしないかを判定する方法

サイト内の特定の条件を判定して、JavaScriptを実行させていと言ったことはよくあると思います。もし、classの有無を判別して、それによって実行するJavaScriptを指定できたら便利ですよね？そこで今回は、jQueryで特定のclassが存在するかしないかを判定する方法をご紹介します。

classの有無を判定するhasClassの使い方と条件分岐
jQuery で追加されたclassの有無も判定できます。

classの有無を判定するhasClassの使い方と条件分岐

jQuery でclassの有無を判定するには「hasClass」というメソッドを使います。

<div class="example"></div>

1	<div class="example"></div>

$('div').hassClass('example');

1	$('div').hassClass('example');

上記の例は、exampleというclass名を「hasClass」で判定した記述になります。この指定で「example」というclassを持つdivがあるかないかを判定することができます。
もし、このexampleというclassの有無で条件分岐したい場合は次のように記述することで実現できます。

if($('div').hasClass('example')){
//exampleというclassが存在する場合の記述
}else{
//exampleというclassが存在しない場合の記述
}

if($('div').hasClass('example')){

//exampleというclassが存在する場合の記述

}else{

//exampleというclassが存在しない場合の記述

}

jQuery で追加されたclassの有無も判定できます。

動作のきっかけを作る目的でjQueryを使ってclassを追加することがよくあると思いますが、そういったclassの有無も「hasClass」を使って判定することができます。

<p class="btn">メニューボタン</p>
<ul class="menu">
<li>メニュー１</li>
<li>メニュー２</li>
<li>メニュー３</li>
</ul>

<p class="btn">メニューボタン</p>

</ul>

$('. btn ').click(function() {
   $(this).toggleClass('active1');
 
    if ($(this).hasClass('active1')) {
        $('. menu ').addClass('active2');
    } else {
        $('. menu ').removeClass('active2');
    }
});

$('. btn ').click(function() {

$(this).toggleClass('active1');

if ($(this).hasClass('active1')) {

$('. menu ').addClass('active2');

} else {

$('. menu ').removeClass('active2');

}

});

上記の例は、メニュボタンをクリックすると、クリックされたメニューボタンと指定されたメニューにクラスが追加されるという仕組みのモデルです。
メニューボタン「btn」がクリックされると、「toggleClass」によって「active1」というclassが追加される仕組みですが、ここで追加された「active1」の有無を「hasClass」で判定して「active1」の場合は「menu」にclass「active2」を追加するかる、ない場合は取り除くという動作を行っております。