はじめに

メニューにサブメニューがあるかどうか調べるときに特定のIDに特定のクラスがあるかどうか調べたいんですが、どうしたらいいですか？

jsのhasClassを使うとそれができますよ。返ってくる値はtrue or falseなので使いやすいかと思います。

hasClassですね。使って見ます！

ぜひ試して見てください。

hasClassを使って特定の要素に特定のクラスがあるのかを調べよう

メニューなどで子メニューが生成されてるときに特定のクラスを付与することで、アコーディオンなどを作ったりますね。
そういうときに、クラスが付与されているのかを調べたりすることは非常に便利な方法になります。
また、特定のボタンがactiveになっているのかどうかなど調べたりすることにも応用できます。

サンプルhtmlとjs

<p id="true" class="testclass">TRUE判定用</p>
<p id="false">FALSE判定用</p>
<p id="trueoutput"></p>
<p id="falseoutput"></p>

jQuery(function(){
 var truetest=jQuery('#true').hasClass('testclass');
 var falsetest=jQuery('#false').hasClass('testclass');
 jQuery('#trueoutput').html("testclassがあることを調べられました。");
 jQuery('#falseoutput').html("testclassがありませんでした。");
});

上記のように id=”true”にはtestclassというものをつけました。今回のサンプルでは、testclassが付いているかどうかを判別してid=”trueoutput”とid=”falseoutput”に判定結果を出力するようなものにしました。

サンプルの実行結果

TRUE判定用

FALSE判定用

上記のように、trueが判定された方にはクラスが検出された文字が出力されていることがわかります。
特定のIDに複数のclassが必要な場合は、こちらの記事よりclass名を取得する方法をご紹介させていただいております。