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

2062

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

<element class="a b">

Entonces, solo los elementos que tienen ambas clases.

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

Mladen
fuente
2
Sería bueno si pudieras definir qué significa unión e intersección para nosotros los novatos :)
Kolob Canyon
10
La unión e intersección @KolobCanyon son conceptos básicos de la teoría de conjuntos. Entonces, por ejemplo, un sindicato sería de habla francesa (incluye hombres y mujeres), mientras que una intersección sería todas las mujeres que hablan francés (excluye a todos los que no hablan francés y excluye a todas las personas que no son mujeres). Se pueden hacer uniones e intersecciones con cualquier número de características que definan cada conjunto. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne
66
Creo que te refieres a que de los dos conjuntos "mujeres" y "francófonos", el sindicato sería todas las mujeres del mundo y todos los francófonos del mundo, un conjunto que incluye tanto a las 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

Respuestas:

2628

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

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

$('.b.a')

Entonces, para hacer coincidir un divelemento que tiene un ID acon clases by c, escribiría:

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

(En la práctica, lo más probable es que no necesite ser tan específico, y un ID o un selector de clase por sí solo suele ser suficiente:. $('#a'))

Sasha Chedygov
fuente
99
@Flater: Fue solo por el ejemplo. Pero podría ser útil si las clases by cse agregan dinámicamente, y solo desea seleccionar el elemento si tiene esas clases.
Sasha Chedygov
3
Ajá, buen punto :-) Hasta ahora hubiera usado .hasClass () pero esta es una notación mucho mejor.
Flater
44
Este método de selección también funciona para CSS, por ejemplo .ab {propiedades de estilo}, consulte: css-tricks.com/multiple-class-id-selectors
Chris Halcrow
30
@Shimmy: Sí. Un espacio entre dos selectores significa que está buscando descendientes; es decir, .a .bbusca elementos con clase bque son descendientes de un elemento con clase a. Entonces, algo así div asolo devolverá aelementos que están dentro de un divelemento.
Sasha Chedygov,
2
@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 OR lógico), no en ambos, por lo que no es lo mismo (aunque puedo ver cómo eso puede ser confuso).
Sasha Chedygov
174

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

$(".a").filter(".b")
Jamie Love
fuente
16
¿Cuál es la diferencia entre esta respuesta y la aceptada?
Vivian River
49
@Rice: Este será un poco más lento, porque primero creará una lista de objetos con la clase "a", luego eliminará todos los que no tengan la clase "b", mientras que el mío lo hace en un solo paso. Pero por lo demás, no hay diferencia.
Sasha Chedygov
55
Esto funcionó para mí en una instancia en la que estaba buscando una clase definida como una variable, que no funcionaba con la sintaxis en el primer ejemplo. por ejemplo: $ ('. foo'). filter (variable). Gracias
pac
77
@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
66
Esto también es más eficiente si ya ha encontrado .a's' y necesita filtrar varias veces diferentes clases arbitrarias basadas que también pertenecen al .aconjunto original .
Qix - MONICA FUE MALTRATADA el
123

Para el caso

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

Tendría que poner un espacio entre .ay.b.c

$('.a .b.c')
juanpaulo
fuente
Agregando a su respuesta, me gustaría saber cómo acceder a byc si el caso es el siguiente: <element class = "a"> <element class = "b"> </element> <element class = "c" > </element> </element>? A través de $ ('. A .b.c') da un resultado incorrecto.
Ipsita Rout
En este ejemplo, ¿ $('.a .c.b')funcionaría también el selector ?
Daniel W.
Sí, ya que el orden no importa.
Zim84
$('.a > element')
Alex
63

El problema que tienes es que estás usando a Group Selector, ¡mientras que deberías estar usando a Multiples selector! Para ser más específico, está usando $('.a, .b')mientras que debería 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: ","

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

$('h1, p, a')

Selector de múltiplos: "" (sin caracteres)

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

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

Selector descendiente: "" (espacio)

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

$('p i')

Selector de niños: ">"

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

$('li > ul')

Selector de hermanos adyacentes: "+"

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

$('h2 + a')

Selector general de hermanos: "~"

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

$('div ~ span')
John Slegers
fuente
38

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

usuario2298171
fuente
26

Solo mencione otro caso con element:

P.ej <div id="title1" class="A B C">

Sólo tipo: $("div#title1.A.B.C")

macio.Jun
fuente
26

Solución JavaScript de vainilla: -

document.querySelectorAll('.a.b')

Salman von Abbas
fuente
20

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

Tejas Shah
fuente
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") 
Surya R Praveen
fuente
4

No necesitas jQuerypara esto

En Vanillapuedes hacer:

document.querySelectorAll('.a.b')
Sandwell
fuente
Es cierto en 2018, pero no esta pregunta se hizo en 2009
Michiel
3

su código $(".a, .b")funcionará para varios elementos debajo (al mismo tiempo)

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

si desea seleccionar un elemento que tenga ambas clases de a y b, en lugar <element class="a b">de usar js sin coma

$('.a.b')
Savan
fuente
2

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

bahman parsamanesh
fuente
1

var elem = document.querySelector (". ab");

Karim Ali
fuente