Come posso selezionare un elemento con più classi in jQuery?

Voglio selezionare tutti gli elementi che hanno le due classi ae b.

<element class="a b">

Quindi, solo gli elementi che hanno entrambe le classi.

Quando lo uso $(".a, .b")mi dà l'unione, ma voglio l'intersezione.

Se si desidera abbinare solo elementi con entrambe le classi (un'intersezione, come un AND logico), basta scrivere i selettori insieme senza spazi tra:

$('.a.b')

L'ordine non è rilevante, quindi puoi anche scambiare le classi:

$('.b.a')

Quindi, per abbinare un divelemento che ha un ID di acon le classi be c, dovresti scrivere:

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

(In pratica, molto probabilmente non hai bisogno di ottenere quello specifico, e un ID o un selettore di classe da solo è di solito abbastanza:. $('#a'))

Puoi farlo usando la filter()funzione:

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

Per il caso

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

Dovresti mettere uno spazio tra .ae.b.c

$('.a .b.c')

Il problema che stai riscontrando è che stai usando a Group Selector, mentre dovresti usare a Multiples selector! Per essere più specifici, stai usando $('.a, .b')mentre dovresti usare $('.a.b').

Per ulteriori informazioni, vedere la panoramica dei diversi modi per combinare i selettori qui di seguito!

Selettore gruppo: ","

Seleziona tutti gli <h1>elementi E tutti gli <p>elementi E tutti gli <a>elementi:

$('h1, p, a')

Selettore multiplo: "" (nessun carattere)

Seleziona tutti gli <input>elementi di type text, con le classi codee red:

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

Selettore discendente: "" (spazio)

Seleziona tutti gli <i>elementi all'interno degli <p>elementi:

$('p i')

Selettore figlio: ">"

Seleziona tutti gli <ul>elementi che sono figli immediati di un <li>elemento:

$('li > ul')

Selettore fratello adiacente: "+"

Seleziona tutti gli <a>elementi che vengono posizionati immediatamente dopo gli <h2>elementi:

$('h2 + a')

Selettore generale di fratelli: "~"

Seleziona tutti gli <span>elementi che sono fratelli di <div>elementi:

$('div ~ span')

Basta menzionare un altro caso con elemento:

Per esempio <div id="title1" class="A B C">

Basta digitare: $("div#title1.A.B.C")

Soluzione JavaScript alla vaniglia: -

document.querySelectorAll('.a.b')

Per prestazioni migliori è possibile utilizzare

$('div.a.b')

Questo guarderà solo attraverso gli elementi div invece di passare attraverso tutti gli elementi HTML che hai sulla tua pagina.

Selettore di gruppo

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

Diventa questo:

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

Quindi nel tuo caso hai provato il selettore di gruppo mentre è un'intersezione

$(".a, .b") 

invece usa questo

$(".a.b") 

Non è necessario jQueryper questo

In Vanillapuoi fare:

document.querySelectorAll('.a.b')

il tuo codice $(".a, .b")funzionerà per più elementi di seguito (contemporaneamente)

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

se si desidera selezionare un elemento con aeb entrambe le classi come <element class="a b">usare js senza coma

$('.a.b')

Puoi usare il getElementsByClassName()metodo per quello che vuoi.

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>

Questa è anche la soluzione più veloce. puoi vedere un benchmark su questo qui .

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