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

Question

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

<element class="a b">

Quindi, solo gli elementi che hanno entrambe classi.

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

Answer 1

Se vuoi abbinare solo elementi con entrambe classi (un'intersezione, come un AND logico), scrivi semplicemente i selettori senza spazi tra:

$('.a.b')

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

$('.b.a')

Quindi, per abbinare un div elemento che ha un ID di a con le classi b e c, dovresti scrivere:

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

(In pratica, molto probabilmente non è necessario ottenere questo specifico, e un ID o un selettore di classe da solo è di solito sufficiente: $('#a').)

Answer 2

Puoi farlo utilizzando la filter() :

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

Answer 3

Per il caso

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

Dovresti inserire uno spazio tra .a e .b.c

$('.a .b.c')

Answer 4

Il problema che stai riscontrando è che stai usando un Group Selector, mentre dovresti usare un 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 <h1> elementi E tutti <p> elementi E tutti <a> elementi:

$('h1, p, a')

Selettore multiplo: " " (nessun personaggio)

Seleziona tutti i <input> elementi di type text, con le classi code e red:

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

Selettore discendente: " & Quot; (Spazio)

Seleziona tutti <i> elementi all'interno di <ul> elementi:

$('p i')

Selettore figlio: " > "

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

$('li > ul')

Selettore fratello adiacente: " + "

Seleziona tutti <span> gli elementi che vengono posizionati immediatamente dopo <div> elementi:

$('h2 + a')

Selettore generale di fratelli: " ~ "

Seleziona tutti <=> elementi che sono fratelli di <=> elementi:

$('div ~ span')

Answer 5

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

Answer 6

Basta menzionare un altro caso con elemento:

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

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

Answer 7

Soluzione JavaScript alla vaniglia: -

document.querySelectorAll('.a.b')

Answer 8

Per prestazioni migliori puoi usare

$('div.a.b')

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

Answer 9

Selettore 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 incrocio

$(".a, .b") 

invece usa questo

$(".a.b") 

Answer 10

Non è necessario jQuery per questo

In Vanilla puoi fare:

document.querySelectorAll('.a.b')

Answer 11

Puoi usare il metodo getElementsByClassName() 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 quel qui .