jQueryで要素のクラス存在チェック！hasClassメソッドの使い方を解説
Webサイト制作において、特定の要素に特定のクラスが付与されているかを確認したい場面は多くあります。jQueryを使用すると、hasClassメソッドを用いることで、このクラス存在チェックを簡単に行うことができます。
この記事では、jQueryのhasClassメソッドの基本的な使い方から、応用例までを具体的なコード例を交えて詳しく解説していきます。
要素のクラス存在チェック： jQuery .hasClass() メソッドとは？
jQueryの.hasClass()メソッドは、指定した要素に特定のクラスが付与されているかどうかを判定するために使用します。このメソッドは、要素が指定したクラスを持っている場合はtrueを、持っていない場合はfalseを返します。
基本的な構文は以下の通りです。
$(セレクタ).hasClass('クラス名');
$(セレクタ)：クラスの存在チェックを行う対象の要素を指定します。'クラス名'：チェックしたいクラス名をクォーテーションで囲んで指定します。
hasClassメソッドの使い方： 実際のコード例で確認！
具体的な例として、以下のようなHTMLとjQueryコードを考えてみましょう。
<div class="box active">ボックス1</div>
<div class="box">ボックス2</div>
<script>
$(function() {
// ボックス1に 'active' クラスがあるかチェック
var hasActiveClass = $('.box:first').hasClass('active');
console.log(hasActiveClass); // true
// ボックス2に 'active' クラスがあるかチェック
var hasActiveClass2 = $('.box:last').hasClass('active');
console.log(hasActiveClass2); // false
});
</script>
このコードでは、まず.box要素のうち最初の要素に対してhasClass('active')を実行し、結果をhasActiveClass変数に格納しています。.box:first要素はactiveクラスを持っているため、hasActiveClassにはtrueが代入されます。同様に、.box:last要素に対してはfalseが返されます。
複数クラスの存在チェック： hasClassメソッドで複数のクラスを判定
.hasClass()メソッドでは、複数のクラス名をスペース区切りで指定することで、複数のクラスの存在を一度にチェックすることも可能です。例えば、"box active"のように指定することで、"box"クラスと"active"クラスの両方が要素に付与されているかを判定できます。
<div class="box active important">ボックス1</div>
<script>
$(function() {
var hasMultipleClasses = $('.box').hasClass('active important');
console.log(hasMultipleClasses); // true
});
</script>
上記の例では、.box要素は"active"クラスと"important"クラスの両方を持ち合わせているため、trueが返されます。
if文との組み合わせ： クラスの有無で処理を分岐！
.hasClass()メソッドは、if文と組み合わせることで、要素が特定のクラスを持っているかどうかによって処理を分岐させることができます。
<div class="box active">ボックス1</div>
<div class="box">ボックス2</div>
<script>
$(function() {
$('.box').each(function() {
if ($(this).hasClass('active')) {
// 'active' クラスを持つ要素に対する処理
$(this).css('background-color', 'red');
} else {
// 'active' クラスを持たない要素に対する処理
$(this).css('background-color', 'blue');
}
});
});
</script>
このコードでは、.box要素それぞれに対して、activeクラスを持っているかどうかを判定し、持っている場合は背景色を赤、持っていない場合は背景色を青に設定しています。
hasClassメソッドの応用例： スライドショーの実装
.hasClass()メソッドは、様々な場面で活用することができます。ここでは、具体的な応用例として、スライドショーの実装方法を紹介します。
<div class="slideshow">
<ul>
<li class="active">スライド1</li>
<li>スライド2</li>
<li>スライド3</li>
</ul>
<button class="prev">前へ</button>
<button class="next">次へ</button>
</div>
<script>
$(function() {
$('.next').on('click', function() {
var $active = $('.slideshow li.active');
var $next = $active.next();
if ($next.length === 0) {
$next = $('.slideshow li:first');
}
$active.removeClass('active');
$next.addClass('active');
});
// 戻るボタンの処理
$('.prev').on('click', function() {
var $active = $('.slideshow li.active');
var $prev = $active.prev();
if ($prev.length === 0) {
$prev = $('.slideshow li:last');
}
$active.removeClass('active');
$prev.addClass('active');
});
});
</script>
上記のコードは、.hasClass()メソッドを用いて、現在表示されているスライドを把握し、次のスライドや前のスライドを表示する処理を実装しています。このように、.hasClass()メソッドは動的なWebページの要素の状態管理に役立ちます。
まとめ： jQueryでクラス存在チェックをマスターしよう！
この記事では、jQueryの.hasClass()メソッドの使い方について、基本から応用例までを解説しました。.hasClass()メソッドを使用することで、要素に対するクラスの有無による条件分岐や、動的な処理を簡単に実装することができます。この記事を参考に、.hasClass()メソッドをWebサイト制作に役立ててください。
その他の参考記事:jquery 存在 チェック