it-swarm.com.de

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

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

<element class="a b">

Also nur die Elemente, die beide Klassen haben.

Wenn ich $(".a, .b") verwende, erhalte ich die Vereinigung, aber ich möchte die Schnittmenge.

1947
Mladen

Wenn Sie nur Elemente mit beiden Klassen (einer Schnittmenge wie einem logischen UND) abgleichen möchten, schreiben Sie einfach die Selektoren zusammen ohne Leerzeichen dazwischen:

$('.a.b')

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

$('.b.a')

Um also ein div -Element mit der ID a mit den Klassen b und c abzugleichen, schreiben Sie:

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

(In der Praxis ist es wahrscheinlich nicht erforderlich, eine bestimmte ID oder einen Klassenselektor zu erhalten. In der Regel reicht dies aus: $('#a').)

2499
Sasha Chedygov

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

$(".a").filter(".b")
166
Jamie Love

Im Falle

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

Sie müssten ein Leerzeichen zwischen .a und .b.c einfügen

$('.a .b.c')
115
juanpaulo

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

Weitere Informationen finden Sie in der folgenden Übersicht über die verschiedenen Kombinationsmöglichkeiten von Selektoren!


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 von typetext mit den Klassen code und red aus:

$('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 unmittelbare untergeordnete Elemente eines <li> Elements sind:

$('li > ul')

Benachbarte Geschwisterauswahl: "+"

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

$('h2 + a')

Allgemeine Geschwisterauswahl: "~"

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

$('div ~ span')
57
John Slegers
$('.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>
36
user2298171

Erwähnen Sie einfach einen anderen Fall mit Element:

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

Geben Sie einfach Folgendes ein: $("div#title1.A.B.C")

25
macio.Jun

Vanille JavaScript Lösung: -

document.querySelectorAll('.a.b')

25
Salman for Hire

Für eine bessere Leistung können Sie verwenden

$('div.a.b')

Dadurch werden nur die div-Elemente durchsucht, anstatt alle HTML-Elemente auf Ihrer Seite zu durchsuchen.

18
Tejas Shah

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 versucht, die Gruppenauswahl vorzunehmen, während es sich um eine Schnittmenge handelt

$(".a, .b") 

verwenden Sie stattdessen diese

$(".a.b") 
8
Surya R Praveen

Sie brauchen dafür nicht jQuery

In Vanilla können Sie Folgendes tun:

document.querySelectorAll('.a.b')
3
Sandwell

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

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 darüber sehen hier .

1