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




ejemplos selectores (10)

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.


Answers

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

$(".a").filter(".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')

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

Para el caso

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

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

$('.a .b.c')

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.


Solo menciona otro caso con elemento:

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

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


No necesitas jQuery para esto.

En Vanilla puedes hacer:

document.querySelectorAll('.a.b')

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

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


Mientras se "repite" a través de elementos dinámicamente creados, seleccione con .each (function () ...): $("option:selected").text(); y $(this + " option:selected").text() no devolvió el texto de la opción seleccionada, en su lugar era nulo.

Pero la solución de Peter Mortensen funcionó:

$(this).find("option:selected").text();

No sé por qué la forma habitual no tiene éxito en un .each() (probablemente mi propio error), pero gracias, Peter. Sé que esa no era la pregunta original, pero la menciono "para los novatos que vienen a través de Google".

Habría empezado con $('#list option:selected").each() excepto que también necesitaba tomar cosas del elemento seleccionado.





javascript jquery css-selectors jquery-selectors