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


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

<element class="a b">

Also, nur die Elemente, die haben beide Klassen.

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


1771
2018-06-24 22:28


Ursprung


Antworten:


Wenn Sie eine Kreuzung wollen, schreiben Sie einfach die Selektoren zusammen ohne Zwischenraum zwischen.

$('.a.b')

Also für ein Element mit einer ID von a mit Klassen b und c, würdest du schreiben:

$('#a.b.c')

2291
2018-06-24 22:30



Sie können dies mit dem. Tun filter() Funktion:

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

147
2018-06-24 22:34



Im Falle

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

Sie müssten einen Zwischenraum dazwischen legen .a und .b.c

$('.a .b.c')

97
2018-03-25 20:31



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

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


Gruppenauswahl: ","

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

$('h1, p, a')

Mehrfachauswahl: "" (kein Zeichen)

Wählen Sie Alle <input> Elemente von type  textmit Klassen code und red :

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

Nachkommen-Selektor: "" (Leerzeichen)

Wählen Sie Alle <i> Elemente im Inneren <p> Elemente:

$('p i')

Kinderauswahl: ">"

Wählen Sie Alle <ul> Elemente, die unmittelbare Kinder eines sind <li> Element:

$('li > ul')

Benachbarte Geschwisterauswahl: "+"

Wählen Sie Alle <a> Elemente, die unmittelbar danach platziert werden <h2> Elemente:

$('h2 + a')

Allgemeine Geschwisterauswahl: "~"

Wählen Sie Alle <span> Elemente, die Geschwister sind <div> Elemente:

$('div ~ span')

45
2018-01-20 22:24



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


30
2018-04-19 07:19



Vanille JavaScript-Lösung: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02



Erwähnen Sie einen anderen Fall mit Element:

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

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


22
2017-12-14 16:15



Für eine bessere Leistung können Sie verwenden

$('div.a.b')

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


16
2017-09-28 05:26



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 deinem Fall hast du also den Gruppenselektor ausprobiert, während es eine Kreuzung ist

$(".a, .b") 

benutze das stattdessen

$(".a.b") 

6
2018-05-17 13:57



Du brauchst nicht jQuery dafür

Im Vanilla du kannst tun :

document.querySelectorAll('.a.b')

1
2018-04-04 08:00



Sie können verwenden getElementsByClassName() Methode für 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 eine Benchmark darüber sehen Hier.


0
2017-08-01 10:41