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

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

<element class="a b">

Entonces, solo los elementos que tienen ambas clases.

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

Si desea hacer coincidir solo elementos con ambas clases (una intersección, como un AND lógico), simplemente escriba los selectores juntos sin espacios entre ellos:

$('.a.b')

El orden no es relevante, por lo que también puede intercambiar las clases:

$('.b.a')

Entonces, para hacer coincidir un divelemento que tiene un ID acon clases by c, escribiría:

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

(En la práctica, lo más probable es que no necesite ser tan específico, y un ID o un selector de clase por sí solo suele ser suficiente:. $('#a'))

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

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

Para el caso

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

Tendría que poner un espacio entre .ay.b.c

$('.a .b.c')

El problema que tienes es que estás usando a Group Selector, ¡mientras que deberías estar usando a Multiples selector! Para ser más específico, está usando $('.a, .b')mientras que debería estar usando $('.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 <h1>elementos Y todos los <p>elementos Y todos los <a>elementos:

$('h1, p, a')

Selector de múltiplos: "" (sin caracteres)

Seleccione todos los <input>elementos de type text, con clases codey red:

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

Selector descendiente: "" (espacio)

Seleccione todos los <i>elementos dentro de los <p>elementos:

$('p i')

Selector de niños: ">"

Seleccione todos los <ul>elementos que son hijos inmediatos de un <li>elemento:

$('li > ul')

Selector de hermanos adyacentes: "+"

Seleccione todos los <a>elementos que se colocan inmediatamente después de los <h2>elementos:

$('h2 + a')

Selector general de hermanos: "~"

Seleccione todos los <span>elementos que son hermanos de <div>elementos:

$('div ~ span')

Solo mencione otro caso con element:

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

Sólo tipo: $("div#title1.A.B.C")

Solución JavaScript de vainilla: -

document.querySelectorAll('.a.b')

Para un mejor rendimiento puedes usar

$('div.a.b')

Esto solo se verá a través de los elementos div en lugar de recorrer todos los elementos html que tiene en su 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 su caso, ha probado el selector de grupo mientras que es una intersección

$(".a, .b") 

en su lugar usa esto

$(".a.b") 

No necesitas jQuerypara esto

En Vanillapuedes hacer:

document.querySelectorAll('.a.b')

su código $(".a, .b")funcionará para varios elementos debajo (al mismo tiempo)

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

si desea seleccionar un elemento que tenga ambas clases de a y b, en lugar <element class="a b">de usar js sin coma

$('.a.b')

Puedes usar el getElementsByClassName()método para lo que quieras.

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>

Esta es la solución más rápida también. Puedes ver un punto de referencia sobre eso aquí .

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