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

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

<element class="a b">

つまり、両方のクラスを持つ要素のみです。

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

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

$('.a.b')

順序は関係ないため、クラスを交換することもできます。

$('.b.a')

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

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

（実際には、ほとんどの場合、その特定を取得する必要はありません$('#a')。通常、IDまたはクラスセレクターだけで十分です。）

これを行うには、次のfilter()関数を使用します。

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

ケースについて

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

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

$('.a .b.c')

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

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

グループセレクタ： "、"

すべての<h1>要素およびすべての<p>要素およびすべての<a>要素を選択します。

$('h1, p, a')

マルチプルセレクター： ""（文字なし）

のすべての<input>要素を選択しtype text、クラスcodeとred：

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

子孫セレクタ： ""（スペース）

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

$('p i')

子セレクター： ">"

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

$('li > ul')

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

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

$('h2 + a')

一般兄弟セレクター： "〜"

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

$('div ~ span')

要素の別のケースに言及してください：

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

入力するだけです： $("div#title1.A.B.C")

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

document.querySelectorAll('.a.b')

より良いパフォーマンスのためにあなたは使うことができます

$('div.a.b')

これは、ページ上にあるすべてのhtml要素をステップスルーするのではなく、div要素のみを調べます。

グループセレクター

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

これになる：

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

したがって、あなたの場合、あなたはグループセレクターを試しましたが、その交差点は

$(".a, .b") 

代わりにこれを使用してください

$(".a.b") 

jQueryこれは必要ありません

ではVanilla、あなたが行うことができます。

document.querySelectorAll('.a.b')

あなたのコード$(".a, .b")は複数の要素の下で（同時に）動作します

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

<element class="a b">コマなしでjsを使用するよりも、aとbの両方のクラスを持つ要素を選択する場合

$('.a.b')

好きなgetElementsByClassName()方法でメソッドを使うことができます。

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);

<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

これも最速のソリューションです。あなたはそれについてのベンチマークをここで見ることができます。

var elem = document.querySelector（ "。ab"）;