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

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

  

Quindi, solo gli elementi che hanno entrambe le classi.

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

Se vuoi un incrocio, scrivi semplicemente i selettori insieme senza spazi tra loro.

 $('.a.b') 

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

 $('#abc') 

Puoi farlo usando la funzione filter() :

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

Per il caso

     

Dovresti inserire uno spazio tra .a e .bc

 $('.a .b.c') 

Il problema che stai avendo è 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 di combinare i selettori qui sotto!


Selettore gruppo: “,”

Seleziona tutti gli elementi

E tutti gli elementi

E tutti gli elementi :

 $('h1, p, a') 

Selettore Multipli: “” (nessun carattere)

Seleziona tutti gli elementi di type text , con code classi e red :

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

Selettore dei discendenti: “” (spazio)

Seleziona tutti elementi all’interno degli elementi

:

 $('p i') 

Selettore bambino: “>”

Seleziona tutti gli elementi

    che sono figli immediati di un elemento

  • :

     $('li > ul') 

    Selettore della Sibling adiacente: “+”

    Seleziona tutti gli elementi posizionati immediatamente dopo gli elementi

    :

     $('h2 + a') 

    Selettore generale del fratello germano: “~”

    Seleziona tutti gli elementi che sono fratelli di

    elementi:

     $('div ~ span') 
     $('.a .b , .a .c').css('border', '2px solid yellow'); //selects b and c 
      
    a
    b
    c
    d

    Basta menzionare un altro caso con l’elemento:

    Ad esempio

    Basta digitare: $("div#title1.ABC")

    Soluzione JavaScript vaniglia: –

    document.querySelectorAll('.a.b')

    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.

    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 incrocio

     $(".a, .b") 

    invece usa questo

     $(".ab") 

    Non hai bisogno di jQuery per questo

    In Vanilla puoi fare:

     document.querySelectorAll('.a.b') 

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

     var elems = document.getElementsByClassName("abc"); elems[0].style.color = "green"; console.log(elems[0]); 
     
    • a
    • a, b
    • a, b, c