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

Question

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

<element class="a b">

Así, sólo los elementos que han ambos clases.

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

Answer 1

Si usted desea hacer coincidir sólo con elementos ambos clases (de una intersección, como un and lógico), sólo tiene que escribir los selectores juntos sin espacios en entre:

$('.a.b')

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

$('.b.a')

Así que para que coincida con un div elemento que tiene un ID de a con las clases b y c, habría que escribir:

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

(En la práctica, lo más probable es que no se necesita que específica, y un ID o class selector de por sí suele ser suficiente: $('#a').)

Answer 2

Puede hacerlo utilizando la función filter() :

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

Answer 3

Para el caso

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

Usted tendría que poner un espacio entre .a y .b.c

$('.a .b.c')

Answer 4

El problema que tienes, es que usted está utilizando una Group Selector, mientras que las que usted debe utilizar un Multiples selector!Para ser más específicos, estás usando $('.a, .b') mientras que usted debe utilizar $('.a.b').

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

---

Selector De Grupo :","

Seleccione todos los <h1> elementos Y todos los <p> elementos Y todos los <a> elementos :

$('h1, p, a')

Múltiplos de selección :"" (sin letra)

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

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

Descendiente De Selección :"" (espacio)

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

$('p i')

Selector De Hijo :">"

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

$('li > ul')

Selector De Hermanos Adyacentes :"+"

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

$('h2 + a')

General Selector De Hermanos :"~"

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

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

Solo mencione otro caso con elemento:

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

Simplemente escriba: $("div#title1.A.B.C")

Answer 7

Solución JavaScript de vainilla: -

document.querySelectorAll('.a.b')

Answer 8

Para un mejor rendimiento puede 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.

Answer 9

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") 

Answer 10

No necesita jQuery para esto

En Vanilla puedes hacer:

document.querySelectorAll('.a.b')

Answer 11

Puedes usar el método getElementsByClassName() 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. puede ver un punto de referencia sobre eso aquí .