jQueryのhasClass()でクラスが存在するかどうか確認する方法について【jQuery】

jQueryでアニメーションをつける際などによく使用するhasClassメソッド。
今回はこのhasClassメソッドについて、基本的な使い方から注意点まで詳しく解説していきます。

hasClassメソッドとは

hasClassメソッドは、指定したクラスが存在するかどうかを調べるためのメソッドです。
指定したクラスが存在する場合にはtrue、存在しない場合にはfalseを返しますので、これを利用してif文で条件分岐させて処理をするといった流れになるのが一般的です。

hasClassメソッドの基本的な使い方

まずはhasClassメソッドの基本的な使い方を解説していきます。
基本的な構文は以下となります。

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

このように対象となる要素にhasclassメソッドを繋げ、引数に存在を確認したいクラス名を記述します。
例として、以下のHTMLを用意し、hasClassメソッドで確認してみます。

<p class="sampleClass">テキストテキストテキスト</p>

$("p").hasClass("sampleClass");

上記の内容を実行すると、クラスが存在するのでtrueを返します。
引数として指定するクラス名は完全一致となりますので、「sample」や「Class」ではfalseを返す点に注意してください。

hasClassメソッドの使用例

続いてhasClassの使用例として、hasClassメソッドでクラスが存在するかどうかをif文で条件分岐させてみます。

if($("p").hasClass('sampleClass')){
    // クラスが存在する場合の処理
} else {
    // クラスが存在しない場合の処理
}

このif文での条件分岐を使用し、以下のようにul要素の中のliに指定のクラスがついているかどうかを、繰り返し処理を組み合わせて、クラスが存在する場合のみ特定の処理をするといった事も可能です。

<ul>
    <li class="list">リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li class="list">リスト4</li>
    <li>リスト5</li>
</ul>

$('li').each(function(){
    if($(this).hasClass('list')){
        // クラスが存在する場合の処理
        $(this).addClass('color-red');
    } 
});

上記の例では、liの数だけeach文で繰り返し、クラス「list」がついているliだけaddClassメソッドで「color-red」という別のクラスを付与しています。

複数のクラスを指定する場合の注意点

続いて、複数のクラスの存在を調べる際の注意点です。
最初に指定するクラス名は完全一致だと述べたように、複数クラスでも同じく完全一致になる為、クラス名はもちろん、クラスの順番も完全一致となります。

まずは以下のコードをご覧ください。

$("p").hasClass('sampleClass1 sampleClass2');

上記の記述だと「sampleClass1 sampleClass2」だとtrueを返し、「sampleClass2 sampleClass1」という順番や「sampleClass1」のように1つだけ一致していてもfalseを返します。

このようにクラスの順番や、部分一致ではfalseを返す点に注意してください。

さいごに

いかがでしたでしょうか。
クラスの存在を調べるhasClassメソッドは使用する事も多いメソッドになります。使い方や注意点をしっかり覚えたうえで使用していきましょう。