• js

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

はじめに

メニューにサブメニューがあるかどうか調べるときに特定の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名を取得する方法をご紹介させていただいております。

関連記事

  1. javascriptを使って要素の横幅を取得してみよう

  2. 特定のIDの複数のクラスをjsで取得しよう

  3. javascriptで四角形に斜め線を引こう

  4. アコーディオンを作ってみよう

  5. javascriptでタブを自作しよう

  6. javascript講座 – ログを出力する –…

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930