jQueryで複数のクラスを持つ要素を選択する方法
2024-04-02
jQueryで複数のクラスを持つ要素を選択するには、いくつかの方法があります。
方法
スペース区切りのセレクタ
複数のクラスをスペースで区切って指定します。
<div class="class1 class2">要素</div>
// .class1 と .class2 両方のクラスを持つ要素を選択
$('.class1.class2').css('color', 'red');
.filter() メソッドを使って、複数の条件に合致する要素を選択できます。
<div class="class1 class2">要素1</div>
<div class="class1 class3">要素2</div>
// .class1 と .class2 または .class3 を持つ要素を選択
$('.class1').filter('.class2, .class3').css('color', 'blue');
.has() メソッドを使って、特定のクラスを持つ子要素を持つ要素を選択できます。
<div class="container">
<div class="class1">要素1</div>
<div class="class2">要素2</div>
</div>
// .class1 を子要素として持つ .container 要素を選択
$('.container').has('.class1').css('border', '1px solid red');
<div class="container">
<div class="class1">
<div class="class2">要素</div>
</div>
</div>
// .class1 を親要素として持つ .class2 要素を選択
$('.class2').closest('.class1').css('background-color', 'yellow');
補足
- 上記以外にも、属性セレクタや :nth-child() などの擬似クラスを使う方法もあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h1>サンプル</h1>
<div class="class1 class2">要素1</div>
<div class="class1 class3">要素2</div>
<div class="container">
<div class="class1">
<div class="class2">要素3</div>
</div>
</div>
<script>
$(function() {
// スペース区切りのセレクタ
$('.class1.class2').css('color', 'red');
// .filter() メソッド
$('.class1').filter('.class2, .class3').css('color', 'blue');
// .has() メソッド
$('.container').has('.class1').css('border', '1px solid red');
// .closest() メソッド
$('.class2').closest('.class1').css('background-color', 'yellow');
});
</script>
</body>
</html>
上記コードをHTMLファイルに保存し、ブラウザで開くと、各方法で選択された要素にスタイルが適用されることが確認できます。
- 上記コードはあくまでもサンプルです。実際の使用例に合わせて、コードを修正する必要があります。
- コードを実行する前に、jQueryライブラリが読み込まれていることを確認してください。
複数のクラスを持つ要素を選択する他の方法
.attr() メソッドを使って、class属性の値を取得し、その値を元に要素を選択できます。
<div class="class1 class2">要素</div>
// class属性の値を取得
var classes = $('.class1').attr('class');
// 取得した値を使って要素を選択
$('.' + classes).css('color', 'red');
.each() メソッドを使って、各要素をループ処理し、その要素のクラス属性をチェックできます。
<div class="class1 class2">要素1</div>
<div class="class1 class3">要素2</div>
// 各要素をループ処理
$('.class1').each(function() {
// クラス属性をチェック
if ($(this).hasClass('class2')) {
$(this).css('color', 'red');
} else if ($(this).hasClass('class3')) {
$(this).css('color', 'blue');
}
});
JavaScriptの配列を使って、複数のクラス名を指定できます。
<div class="class1 class2">要素</div>
// クラス名の配列
var classes = ['class1', 'class2'];
// 配列を使って要素を選択
$('.' + classes.join(' ')).css('color', 'red');
:not() 擬似クラスを使って、特定のクラスを持つ要素を除外できます。
<div class="class1 class2">要素1</div>
<div class="class1 class3">要素2</div>
// .class2 を持たない .class1 要素を選択
$('.class1').not('.class2').css('color', 'red');
- 上記以外にも、さまざまな方法があります。
注意
- 上記の方法は、jQueryのバージョンによって動作が異なる場合があります。
- 使用する前に、jQueryのドキュメントを確認してください。
html jquery css
