jquery - jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?

Question

aと の 2 つのクラスを持つすべての要素を選択したいと考えていますb。

<element class="a b">

したがって、両方のクラスを持つ要素のみ。

使用する$(".a, .b")と結合が得られますが、交差点が必要です。

Answer 1

両方のクラス (論理 AND のような交差)を持つ要素のみを一致させたい場合は、間にスペースを入れずにセレクターを一緒に記述します。

$('.a.b')

順序は関係ないため、クラスを入れ替えることもできます。

$('.b.a')

したがって、クラスおよびdivの ID を持つ要素を一致させるには、次のように記述します。abc

$('div#a.b.c')

(実際には、その特定を取得する必要はほとんどなく、通常は ID またはクラスセレクターだけで十分です: $('#a').)

Answer 2

filter()次の関数を使用してこれを行うことができます。

$(".a").filter(".b")

Answer 3

ケースの場合

<element class="a">
  <element class="b c">
  </element>
</element>

.aとの間にスペースを入れる必要があります。.b.c

$('.a .b.c')

Answer 4

あなたが抱えている問題は、を使用しているGroup Selectorのに対し、Multiples selector!を使用する必要があることです。より具体的には、を使用しているの$('.a, .b')に対し、使用する必要があります$('.a.b')。

詳細については、以下のセレクターを組み合わせるさまざまな方法の概要を参照してください。

---

グループ セレクター: ","

<h1>すべての要素 AND すべての<p>要素 AND すべての要素 を選択<a>:

$('h1, p, a')

倍数セレクター: "" (文字なし)

クラスおよびを含む のすべての<input>要素を選択します。type textcodered

$('input[type="text"].code.red')

子孫セレクター: " " (スペース)

<i>要素内のすべての要素を選択し<p>ます。

$('p i')

子セレクター: ">"

<ul>要素の直接の子であるすべての要素を選択し<li>ます。

$('li > ul')

隣接兄弟セレクター：「+」

<a>要素の直後に配置されているすべての要素を選択し<h2>ます。

$('h2 + a')

一般的な兄弟セレクター: "~"

<span>要素の兄弟であるすべての要素を選択し<div>ます。

$('div ~ span')

Answer 5

$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

Answer 6

要素を使用した別のケースについて言及してください。

例えば<div id="title1" class="A B C">

次のように入力するだけです。$("div#title1.A.B.C")

Answer 7

バニラ JavaScript ソリューション:-

document.querySelectorAll('.a.b')

Answer 8

パフォーマンスを向上させるために、使用できます

$('div.a.b')

これにより、ページにあるすべての html 要素を調べるのではなく、div 要素だけを調べます。