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

2061

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.

jquery jquery-selectors

— Mladen
quelle

2

Es wäre schön, wenn Sie definieren könnten, was Vereinigung und Kreuzung für uns Neulinge bedeuten :)

— Kolob Canyon

10

@ KolobCanyon Vereinigung und Schnittmenge sind grundlegende Konzepte der Mengenlehre. So wäre beispielsweise eine Gewerkschaft alle französischsprachig (einschließlich Männer und Frauen), während eine Kreuzung alle Frauen wären, die Französisch sprechen (schließt alle aus, die kein Französisch sprechen, und schließt alle Personen aus, die keine Frauen sind). Vereinigungen und Schnittpunkte können mit einer beliebigen Anzahl von Merkmalen hergestellt werden, die jeden Satz definieren. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)

— Katharine Osborne

6

Ich denke, Sie meinen, dass von den beiden Gruppen "Frauen" und "französischsprachig" die Gewerkschaft alle Frauen der Welt und alle französischsprachigen Personen der Welt sein würde, eine Gruppe, die beide Frauen umfasst, die nicht sprechen Französisch und französischsprachige Männer. Die Kreuzung sind, wie Sie geschrieben haben, nur die Frauen, die Französisch sprechen.

— Teemu Leisti

2627

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').)

— Sasha Chedygov
quelle

9

@ Flater: Es war nur als Beispiel. Es kann jedoch nützlich sein, wenn die Klassen bund cdynamisch hinzugefügt werden und Sie das Element nur auswählen möchten, wenn es diese Klassen enthält.

— Sasha Chedygov

3

Aha, guter Punkt :-) Bis jetzt hätte ich .hasClass () verwendet, aber dies ist eine viel bessere Notation.

— Flater

4

Diese Auswahlmethode funktioniert auch für CSS, z. B. .ab {Stileigenschaften}, siehe: css-tricks.com/multiple-class-id-selectors

— Chris Halcrow

30

@ Shimmy: Ja. Ein Leerzeichen zwischen zwei Selektoren bedeutet, dass Sie nach Nachkommen suchen. dh .a .bsucht nach Elementen mit Klasse b, die Nachkommen eines Elements mit Klasse sind a. So etwas wie div agibt nur aElemente zurück, die sich innerhalb eines divElements befinden.

— Sasha Chedygov

2

@AaA: Das ist falsch; Dies ist seit Beginn von jQuery so, denn so funktioniert CSS. Ein Komma wählt Elemente aus, die mit einem der Selektoren übereinstimmen (stellen Sie sich das als logisches ODER vor), nicht mit beiden. Es ist also nicht dasselbe (obwohl ich sehen kann, wie verwirrend das sein kann).

— Sasha Chedygov

174

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

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

— Jamie Love
quelle

16

Was ist der Unterschied zwischen dieser und der akzeptierten Antwort?

— Vivian River

49

@Rice: Dieser wird etwas langsamer sein, da er zuerst eine Liste von Objekten mit der Klasse "a" erstellt und dann alle außer denen mit der Klasse "b" entfernt, während meiner dies in einem Schritt tut. Aber sonst kein Unterschied.

— Sasha Chedygov

5

Dies funktionierte für mich in einem Fall, in dem ich nach einer als Variable definierten Klasse suchte, die im ersten Beispiel nicht mit der Syntax funktionierte. Beispiel: $ ('. foo'). Filter (Variable). Danke

— Pac

7

@pac: $ ('. foo' + Variable) hätte den Trick machen sollen, aber ich kann sehen, wo diese Methode in diesem Fall klarer wäre.

— Sasha Chedygov

6

Dies ist auch effizienter, wenn Sie bereits gefunden haben .aund mehrmals basierend auf verschiedenen beliebigen Klassen filtern müssen, die ebenfalls zum ursprünglichen .aSatz gehören.

— Qix - MONICA wurde am

123

Im Falle

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

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

$('.a .b.c')

— Juanpaulo
quelle

Als Ergänzung zu Ihrer Antwort möchte ich wissen, wie Sie auf b und c zugreifen können, wenn der Fall wie folgt lautet: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Durch $ ('. A .b.c') ergibt sich ein falsches Ergebnis.

— Ipsita Rout

Würde in diesem Beispiel der Selektor $('.a .c.b')auch funktionieren?

— Daniel W.

Ja, da die Bestellung keine Rolle spielt.

— Zim84

$('.a > element')

— Alex

63

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')

— John Slegers
quelle

38

$('.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>

Erweitern Sie das Snippet

— user2298171
quelle

26

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")

— macio.Jun
quelle

26

Vanilla JavaScript-Lösung: -

document.querySelectorAll('.a.b')

— Salman von Abbas
quelle

20

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.

— Tejas Shah
quelle

9

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")

— Surya R Praveen
quelle

4

Sie brauchen nicht jQueryfür diese

In können VanillaSie tun:

document.querySelectorAll('.a.b')

— Sandwell
quelle

Richtig im Jahr 2018, aber nicht, wenn diese Frage im Jahr 2009 gestellt wurde

— Michiel

3

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')

— Savan
quelle

2

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>

Erweitern Sie das Snippet

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

— Bahman Parsamanesh
quelle

1

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

— Karim Ali
quelle