jQuery

jQueryで複数セレクタを指定する方法(OR条件,AND条件)

本記事では、jQueryで複数セレクタを指定する方法について解説しています。

このテクニックを覚えることで、複数の条件のうち1つでも当てはまっていたら要素を取得する・イベントを実行、複数の条件を全て当てはまらないと要素を取得しない・イベントを実行しないなどのことが出来るようになります。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!

OR条件で指定する方法

複数の条件のうち1つでも当てはまっていたら(OR条件)の書き方は、セレクタとセレクタの間を「,(カンマ)」で区切ります。

$('セレクタ, セレクタ')
先輩くん

サンプルコードを用意したので、動作確認してみましょう!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p class="sample">テキスト1</p>
    <span class="sample">テキスト1</span>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>
$("p, .sample").css("color", "red");
サンプルコードの表示結果
先輩くん

pタグとクラス名sampleをカンマ区切りで設定しました。spanタグで囲われたテキストも赤色になっていることから、OR条件が正しく機能していることが確認できますね!

AND条件で指定する方法

複数の条件を全て当てはまらないと(AND条件)の書き方は、セレクタとセレクタを繋げて記述します。

先輩くん

AND条件を使う場面の多くは、「html要素+クラス名」だよ!勿論「クラス名+クラス名」の組み合わせも出来るよ!

$('html要素.クラス名')
$('.クラス名.クラス名')
先輩くん

OR条件で使用したサンプルコードのjQueryだけソースコードを変更し、動作確認してみましょう!

$("p.sample").css("color", "red");
サンプルコードの表示結果
先輩くん

pタグとクラス名sampleをAND条件で設定しました。spanタグで囲われたテキストは赤色になっていないため、AND条件が正しく機能していることが確認できますね!

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村