javascript - varios - selectores jquery ejemplos




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

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

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.


No necesitas jQuery para esto.

En Vanilla puedes hacer:

document.querySelectorAll('.a.b')

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.


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 .


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

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

Solución de JavaScript de vainilla: -

document.querySelectorAll('.a.b')


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







jquery-selectors