jQueryのhasClassメソッドで要素にclassが付与されているか判定します。以下のhtmlの構造で確認します。
<ul>
<li class="html css">HTML・CSS</li>
<li class="sass">Sass</li>
<li class="js">JavaScript</li>
</ul>
hasClassメソッドは引数にクラス名を指定します。classが存在する場合はtrue、存在しない場合はfalseを返すので、if文の条件分岐に利用できます。
$(function() {
$("ul li").each(function() {
if($('ul li').hasClass('js')) {
console.log('classが存在します。');
} else {
console.log('classが存在しません。');
}
});
});
実行結果は以下になります。
classが存在しません。
classが存在しません。
classが存在します。
なお、2つのclassが付与された要素があるかチェックする場合は、以下のように引数のクラス名を半角スペースで区切って指定します。
$(function() {
$("ul li").each(function() {
if($('ul li').hasClass('html css')) {
console.log('classが存在します。');
} else {
console.log('classが存在しません。');
}
});
});
実行結果は以下になります。
classが存在します。
classが存在しません。
classが存在しません。
ただしこの場合、引数の指定が「html css」ではなく「css html」だとfalseになります。文字列の順番が一致している場合のみtrueになるので注意が必要です。





