javascript - una - selectores de elementos jquery

¿Cómo puedo seleccionar un elemento con varias clases en jQuery?

Question

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

<element class="a b">

Por lo tanto, sólo los elementos que tienen ambas clases.

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

Answer 1

El problema que tienes es que estás usando un Group Selector , ¡mientras que debes usar 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 <h1> Y todos los elementos <p> Y todos los elementos <a> :

$(''h1, p, a'')

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

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

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

Selector de descendientes: "" (espacio)

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

$(''p i'')

Selector de niños: ">"

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

$(''li > ul'')

Selector de hermanos adyacente: "+"

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

$(''h2 + a'')

Selector general de hermanos: "~"

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

$(''div ~ span'')

Answer 2

No necesitas jQuery para esto.

En Vanilla puedes hacer:

document.querySelectorAll(''.a.b'')

Answer 3

Para el caso

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

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

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

Answer 4

Para un mejor rendimiento puedes usar

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

Esto solo buscará los elementos div en lugar de recorrer todos los elementos html que tiene en su página.

Answer 5

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

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 here .

Answer 6

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

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

Answer 7

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

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

$(".a, .b") 

en su lugar usa este

$(".a.b") 

Answer 8

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

Entonces, para un elemento div que tiene un ID de a con las clases b y c , escribirías:

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

Answer 9

Solo menciona otro caso con elemento:

Por ejemplo, <div id="title1" class="ABC">

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

Answer 10

Solución de JavaScript de vainilla: -

document.querySelectorAll(''.a.b'')

Answer 11

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