jQueryで複数のクラスを指定して要素を取得する方法

jQuery class 取得複数

jQueryを使って、複数のクラスを持つ要素を取得する方法について解説します。addClassやhasClassなどのメソッドと組み合わせることで、柔軟なDOM操作を実現できます。

複数のクラスを持つ要素の取得

複数のクラスを指定して要素を取得するには、クラス名の間にスペースを入れて繋げた文字列をセレクタとして使用します。

例:


// classに"foo"と"bar"を持つ要素を取得
$(".foo.bar")

addClassメソッドでクラスを追加

要素にクラスを追加するには、addClassメソッドを使用します。

例:


//  idが"target"の要素に"foo"と"bar"クラスを追加
$("#target").addClass("foo bar");

hasClassメソッドでクラスの有無を確認

要素が特定のクラスを持っているかどうかを確認するには、hasClassメソッドを使用します。

例:


// idが"target"の要素が"foo"クラスを持っているかどうかを確認
if ($("#target").hasClass("foo")) {
  // "foo"クラスを持っている場合の処理
} else {
  // "foo"クラスを持っていない場合の処理
}

複数のクラスを使った条件分岐

hasClassメソッドと組み合わせることで、複数のクラスに基づいた条件分岐を実装できます。

例:


if ($("#target").hasClass("foo") && $("#target").hasClass("bar")) {
  // "foo"と"bar"の両方を持つ場合の処理
} else if ($("#target").hasClass("foo")) {
  // "foo"だけを持つ場合の処理
} else {
  // それ以外の場合の処理
}

まとめ

jQueryでは、複数のクラスを指定して要素を取得したり、クラスを追加・確認したりすることができます。これらの機能を活用することで、複雑なDOM操作を簡潔に記述できます。

参考

QA

質問	回答
複数のクラスを指定して要素を取得するにはどうすればよいですか？	クラス名の間にスペースを入れて繋げた文字列をセレクタとして使用します。例えば、`$(".foo.bar")` のように記述します。
要素にクラスを追加するにはどうすればよいですか？	`addClass()` メソッドを使用します。例えば、`$("#target").addClass("foo")` のように記述します。
要素が特定のクラスを持っているかどうかを確認するにはどうすればよいですか？	`hasClass()` メソッドを使用します。例えば、`$("#target").hasClass("foo")` のように記述します。

その他の参考記事:jquery class 変更