侍エンジニアブログ: jQueryでクラス操作（指定・削除など）を極めるコツ！
jQueryで複数のクラスを選択する方法
jQueryは、JavaScriptでWebページを操作するためのライブラリです。その機能の一つとして、複数のクラスを持つ要素を選択することができます。これは、ページ上の特定の要素グループにスタイルを適用したり、イベントをバインドしたりする際に役立ちます。
方法
複数のクラスを選択するには、以下の方法があります。
スペース区切りのクラス名
複数のクラス名をスペースで区切って指定することができます。例えば、以下のコードは、boxクラスとredクラスを持つすべての要素を選択します。
$("div.box.red");
.hasClass() メソッドを使用して、要素が特定のクラスを持っているかどうかを確認することができます。以下のコードは、boxクラスを持つすべての要素を選択します。
$("div").hasClass("box");
$("div").filter(".box").filter(".red");
$("div").not(".box");
補足
- 上記の方法は、要素のIDや属性を選択するのにも使用できます。
- 詳細については、jQueryの公式ドキュメントを参照してください。
例
以下の例では、boxクラスとredクラスを持つすべての要素に、borderプロパティを設定しています。
<div class="box red">要素1</div>
<div class="box blue">要素2</div>
<div class="green">要素3</div>
$("div.box.red").css("border", "1px solid black");
このコードを実行すると、要素1のみが黒色の枠線で囲まれます。
応用例
- 特定のクラスを持つ要素にスタイルを適用する
jQueryを使用すると、複数のクラスを持つ要素を簡単に選択することができます。これは、ページ上の特定の要素グループに操作を行う際に非常に役立ちます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="box red">要素1</div>
<div class="box blue">要素2</div>
<div class="green">要素3</div>
<script>
$("div.box.red").css("border", "1px solid black");
</script>
</body>
</html>
解説
<!DOCTYPE html>から</html>は、HTML文書の宣言です。<head>内には、文書に関するメタ情報を記述します。<meta charset="UTF-8">は、文字コードをUTF-8に設定します。<title>内には、文書のタイトルを記述します。<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>は、jQueryライブラリを読み込みます。div.box.redは、boxクラスとredクラスを持つすべての要素を選択します。.css("border", "1px solid black")は、選択された要素のborderプロパティを1px solid blackに設定します。
実行方法
- 上記のコードをHTMLファイルに保存します。
- ブラウザでファイルを開きます。
結果
要素1のみが黒色の枠線で囲まれます。
このコードを応用して、以下のことができます。
複数のクラスを選択する他の方法
$("div").addClass("box red");
$("div").removeClass("box red");
$("div").toggleClass("box red");
.attr() メソッドを使用して、要素のclass属性を取得または設定することができます。以下のコードは、要素のclass属性をbox redに設定します。
$("div").attr("class", "box red");
$("div").prop("class", "box red");
.each() メソッドを使用して、要素をループ処理することができます。以下のコードは、boxクラスとredクラスを持つすべての要素に、borderプロパティを設定します。
$("div").each(function() {
if ($(this).hasClass("box") && $(this).hasClass("red")) {
$(this).css("border", "1px solid black");
}
});
$("div").filter(".box").filter(".red");
$("div").not(".box");
複数のクラスを選択するには、さまざまな方法があります。それぞれの方法にはメリットとデメリットがあるので、状況に合わせて最適な方法を選択する必要があります。
javascript jquery jquery-selectors
