¿Cómo puedo seleccionar un elemento con múltiples clases en jQuery?

Quiero seleccionar todos los elementos que tienen las dos clases a y b .

  

Entonces, solo los elementos que tienen ambas clases.

Cuando uso $(".a, .b") me da la unión, pero quiero la intersección.

Si desea una intersección, simplemente escriba los selectores juntos sin espacios intermedios.

 $('.a.b') 

Entonces, para un elemento que tiene una identificación de a con las clases c , usted debería escribir:

 $('#abc') 

Puedes hacer esto usando la función filter() :

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

Para el caso

     

Deberías poner un espacio entre .a y .bc

 $('.a .b.c') 

¡El problema que tienes es que estás usando un Group Selector , mientras que deberías estar usando un Multiples selector ! Para ser más específico, estás usando $('.a, .b') mientras que debes usar $('.a.b') .

Para obtener más información, consulte la descripción general de las diferentes formas de combinar selectores a continuación.


Selector de grupo: “,”

Seleccione todos los elementos

Y todos los elementos

Y todos los elementos :

 $('h1, p, a') 

Selector de múltiplos: “” (sin carácter)

Seleccione todos elementos de type text , con code clases y red :

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

Selector descendiente: “” (espacio)

Seleccione todos los elementos dentro de elementos

:

 $('p i') 

Selector hijo: “>”

Seleccione todos los elementos

    que sean secundarios inmediatos de un elemento

  • :

     $('li > ul') 

    Selector de hermanos adyacente: “+”

    Seleccione todos los elementos que se colocan inmediatamente después de los elementos

    :

     $('h2 + a') 

    Selector general de hermanos: “~”

    Seleccione todos los elementos que son hermanos de elementos

    :

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

    Solo menciona otro caso con elemento:

    Ej.

    Simplemente escribe: $("div#title1.ABC")

    Solución JavaScript de Vanilla: –

    document.querySelectorAll('.a.b')

    Para un mejor rendimiento, puede usar

     $('div.a.b') 

    Esto se verá solo a través de los elementos div en lugar de recorrer todos los elementos html que tienes en tu página.

    Selector de grupo

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

    Se convierte en esto:

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

    Entonces, en tu caso, has probado el selector de grupo mientras que es una intersección

     $(".a, .b") 

    en su lugar use esto

     $(".ab") 

    No necesitas jQuery para esto

    En Vanilla puedes hacer:

     document.querySelectorAll('.a.b') 

    Puede usar el método getElementsByClassName() para lo que desee.

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