Pregunta ¿Cómo puedo seleccionar un elemento con múltiples 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 ambos clases

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


1771
2018-06-24 22:28


origen


Respuestas:


Si quieres una intersección, simplemente escribe los selectores juntos sin espacios entre.

$('.a.b')

Entonces, para un elemento que tiene una ID de a con clases b y c, usted escribiría:

$('#a.b.c')

2291
2018-06-24 22:30



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

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

147
2018-06-24 22:34



Para el caso

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

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

$('.a .b.c')

97
2018-03-25 20:31



El problema que tienes es que estás usando un Group Selector, mientras que deberías estar usando 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 todo <p> elementos Y todo <a> elementos:

$('h1, p, a')

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

Seleccionar todo <input> elementos de type  textcon clases code y red :

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

Selector descendiente: "" (espacio)

Seleccionar todo <i> elementos dentro <p> elementos:

$('p i')

Selector hijo: ">"

Seleccionar todo <ul> elementos que son hijos inmediatos de un <li> elemento:

$('li > ul')

Selector de hermanos adyacente: "+"

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

45
2018-01-20 22:24



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


30
2018-04-19 07:19



Solución JavaScript de Vanilla: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02



Solo menciona otro caso con elemento:

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

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


22
2017-12-14 16:15



Para un mejor rendimiento, puede usar

$('div.a.b')

Esto se verá solo a través de los elementos div en lugar de recorrer todos los elementos html que tienes en tu página.


16
2017-09-28 05:26



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 tu caso, has probado el selector de grupo mientras que es una intersección

$(".a, .b") 

en su lugar use esto

$(".a.b") 

6
2018-05-17 13:57