¿Cómo puedo seleccionar un elemento con varias clases en jQuery?
Quiero seleccionar todos los elementos que tienen las dos clases. a y b.
<element class="a b">
Entonces, solo los elementos que tienen ambas clases.
Cuando uso $(".a, .b") me da la unión, pero quiero la intersección.
preguntado el 24 de junio de 09 a las 19:06
Mladen
13 Respuestas
Si desea hacer coincidir solo elementos con ambas clases (una intersección, como un Y lógico), simplemente escriba los selectores juntos sin espacios entre:
$('.a.b')
El orden no es relevante, por lo que también puede intercambiar las clases:
$('.b.a')
Entonces, para que coincida con un div elemento que tiene un ID de a con clases b y c, escribirías:
$('div#a.b.c')
(En la práctica, lo más probable es que no necesite obtener eso específico, y un selector de ID o clase por sí solo suele ser suficiente: $('#a').)
respondido 25 nov., 18:21
@Flater: Fue solo a modo de ejemplo. Pero podría ser útil si las clases b y c se agregan dinámicamente y solo desea seleccionar el elemento si tiene esas clases. - Sasha Chedygov
Ajá, buen punto :-) Hasta ahora habría usado .hasClass () pero esta es una notación mucho mejor. - más plano
Este método de selección también funciona para CSS, por ejemplo, .ab {propiedades de estilo} ver: css-tricks.com/multiple-class-id-selectors - chris halcrow
@Shimmy: Sí. Un espacio entre dos selectores significa que está buscando descendientes; es decir .a .b busca elementos con clase b que son descendientes de un elemento con clase a. Entonces algo como div a solo volverá a elementos que son dentro a div elemento. - Sasha Chedygov
@AaA: Eso es incorrecto; ha sido así desde el comienzo de jQuery, porque así es como funciona CSS. Una coma selecciona elementos que coinciden con cualquiera de los selectores (piense en ello como un O lógico), no ambos, por lo que no es lo mismo (aunque puedo ver cómo eso puede ser confuso). - Sasha Chedygov
Puede hacer esto usando el filter() función:
$(".a").filter(".b")
Respondido el 30 de enero de 17 a las 13:01
¿Cuál es la diferencia entre esta respuesta y la aceptada? - Río vivian
@Rice: Este será un poco más lento, porque primero construirá una lista de objetos con la clase "a", luego eliminará todos menos los que tienen la clase "b", mientras que el mío lo hace en un solo paso. Pero por lo demás, no hay diferencia. - Sasha Chedygov
Esto funcionó para mí en una instancia en la que estaba buscando una clase definida como variable, que no funcionaba con la sintaxis del primer ejemplo. por ejemplo: $ ('. foo'). filter (variable). Gracias - pac
@pac: $ ('. foo' + variable) debería haber hecho el truco, pero puedo ver dónde este método sería más claro en ese caso. - Sasha Chedygov
Esto también es más eficiente si ya ha encontrado .ay es necesario filtrar varias veces en función de diferentes clases arbitrarias que también pertenecen al original .a colocar. - Qix - MONICA FUE MALTRATADA
Para el caso
<element class="a">
<element class="b c">
</element>
</element>
Necesitarías poner un espacio en el medio .a y .b.c
$('.a .b.c')
Respondido el 30 de diciembre de 16 a las 15:12
Agregando a su respuesta, me gustaría saber cómo acceder a byc si el caso es el siguiente: ? Mediante $ ('. A .b.c') da un resultado incorrecto. - Ruta de Ipsita
En este ejemplo, ¿el selector $('.a .c.b') Además trabajo ? - Daniel W.
Sí, ya que no importa el orden. - Zim84
$('.a > element') - Alex
El problema que tiene es que está utilizando un Group Selector, mientras que debería utilizar un Multiples selector! Para ser más específico, estás usando $('.a, .b') mientras que deberías 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: ","
Seleccionar todo <h1> elementos Y todos <p> elementos Y todos <a> elementos:
$('h1, p, a')
Selector de múltiplos: "" (sin carácter)
Seleccionar todo <input> elementos de type text, con clases code y red :
$('input[type="text"].code.red')
Selector de descendientes: "" (espacio)
Seleccionar todo <i> elementos en el interior <p> elementos:
$('p i')
Selector de niños: ">"
Seleccionar todo <ul> elementos que son hijos inmediatos de un <li> elemento:
$('li > ul')
Selector de hermanos adyacentes: "+"
Seleccionar todo <a> elementos que se colocan inmediatamente después <h2> elementos:
$('h2 + a')
Selector general de hermanos: "~"
Seleccionar todo <span> elementos que son hermanos de <div> elementos:
$('div ~ span')
Respondido el 29 de diciembre de 16 a las 14:12
$('.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>Respondido el 27 de diciembre de 17 a las 07:12
Solo menciona otro caso con element:
P.ej <div id="title1" class="A B C">
Sólo tipo: $("div#title1.A.B.C")
Respondido el 14 de diciembre de 12 a las 16:12
Solución de JavaScript de vainilla: -
document.querySelectorAll('.a.b')
Respondido el 29 de enero de 15 a las 18:01
Para un mejor rendimiento, puede utilizar
$('div.a.b')
Esto buscará solo a través de los elementos div en lugar de recorrer todos los elementos html que tiene en su página.
Respondido el 28 de Septiembre de 15 a las 06:09
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")
contestado el 17 de mayo de 17 a las 14:05
tu codigo $(".a, .b") funcionará para los siguientes elementos múltiples (al mismo tiempo)
<element class="a">
<element class="b">
si desea seleccionar un elemento que tenga a y b ambas clases como <element class="a b"> que usar js sin coma
$('.a.b')
Respondido 10 Oct 19, 09:10
Puedes usar getElementsByClassName() método para lo que quieres.
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 también la solución más rápida. puedes ver un punto de referencia sobre eso aquí.
Respondido 01 ago 18, 11:08
var elem = document.querySelector (". ab");
Respondido 04 Oct 19, 18:10
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery jquery-selectors or haz tu propia pregunta.
Sería bueno si pudieras definir qué significa unión e intersección para nosotros los novatos :) - Kolob Canyon
La unión y la intersección de @KolobCanyon son conceptos básicos de la teoría de conjuntos. Entonces, por ejemplo, una unión estaría formada por todos los francófonos (incluye tanto hombres como mujeres), mientras que una intersección estaría formada por todas las mujeres que hablan francés (excluye a todas las personas que no hablan francés y excluye a todas las personas que no son mujeres). Se pueden realizar uniones e intersecciones con cualquier número de características que definan cada conjunto. en.wikipedia.org/wiki/Union_(teoría_de_conjuntos) en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
Creo que quieres decir que de los dos conjuntos "mujeres" y "francófonos", la unión sería de todas las mujeres del mundo y todos los francófonos del mundo, un conjunto que incluye tanto a mujeres que no hablan Hombres franceses y francófonos. La intersección es, como usted escribió, solo aquellas mujeres que hablan francés. - Teemu Leisti