Wie kann ich in jQuery ein Element mit mehreren Klassen auswählen?

Ich möchte alle Elemente auswählen, die die beiden Klassen aund haben b.

<element class="a b">

Also nur die Elemente, die beide Klassen haben.

Wenn ich es benutze $(".a, .b"), gibt es mir die Vereinigung, aber ich möchte die Kreuzung.

Wenn Sie nur Elemente mit beiden Klassen abgleichen möchten (ein Schnittpunkt wie ein logisches UND), schreiben Sie die Selektoren einfach ohne Leerzeichen dazwischen zusammen:

$('.a.b')

Die Reihenfolge ist nicht relevant, daher können Sie auch die Klassen austauschen:

$('.b.a')

Um also ein divElement mit einer ID von amit Klassen bund cabzugleichen, würden Sie schreiben:

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

(In der Praxis müssen Sie höchstwahrscheinlich nicht so spezifisch sein, und eine ID oder Klassenauswahl allein reicht normalerweise aus : $('#a').)

Sie können dies mit der filter()Funktion tun :

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

Im Falle

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

Sie müssten ein Leerzeichen zwischen .aund setzen.b.c

$('.a .b.c')

Das Problem, das Sie haben, ist, dass Sie ein verwenden Group Selector, während Sie ein verwenden sollten Multiples selector! Um genauer zu sein, verwenden Sie, $('.a, .b')während Sie verwenden sollten $('.a.b').

Weitere Informationen finden Sie in der Übersicht über die verschiedenen Möglichkeiten, Selektoren zu kombinieren.

Gruppenauswahl: ","

Wählen Sie alle <h1>Elemente UND alle <p>Elemente UND alle <a>Elemente aus:

$('h1, p, a')

Mehrfachauswahl: "" (kein Zeichen)

Wählen Sie alle <input>Elemente aus type text, mit Klassen codeund red:

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

Nachkommenauswahl: "" (Leerzeichen)

Wählen Sie alle <i>Elemente in <p>Elementen aus:

$('p i')

Untergeordnete Auswahl: ">"

Wählen Sie alle <ul>Elemente aus, die einem <li>Element unmittelbar untergeordnet sind:

$('li > ul')

Angrenzender Geschwister-Selektor: "+"

Wählen Sie alle <a>Elemente aus, die unmittelbar nach den <h2>Elementen platziert werden:

$('h2 + a')

Allgemeine Geschwisterauswahl: "~"

Wählen Sie alle <span>Elemente aus, die Geschwister von <div>Elementen sind:

$('div ~ span')

Erwähnen Sie einfach einen anderen Fall mit Element:

Z.B <div id="title1" class="A B C">

Tippe einfach: $("div#title1.A.B.C")

Vanilla JavaScript-Lösung: -

document.querySelectorAll('.a.b')

Für eine bessere Leistung können Sie verwenden

$('div.a.b')

Dies wird nur durch die div-Elemente schauen, anstatt durch alle HTML-Elemente zu gehen, die Sie auf Ihrer Seite haben.

Gruppenauswahl

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;}

Wird dies:

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

In Ihrem Fall haben Sie also die Gruppenauswahl ausprobiert, während es sich um eine Kreuzung handelt

$(".a, .b") 

Verwenden Sie stattdessen diese

$(".a.b") 

Sie brauchen nicht jQueryfür diese

In können VanillaSie tun:

document.querySelectorAll('.a.b')

Ihr Code $(".a, .b")funktioniert für mehrere Elemente gleichzeitig (gleichzeitig)

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

Wenn Sie ein Element mit a und b auswählen möchten, <element class="a b">verwenden Sie js ohne Koma

$('.a.b')

Sie können die getElementsByClassName()Methode für das verwenden , was Sie wollen.

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>

Dies ist auch die schnellste Lösung. Sie können einen Benchmark sehen , dass hier .

var elem = document.querySelector (". ab");