¿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.

Author: John Slegers, 2009-06-25

11 answers

Si desea una intersección, simplemente escriba los selectores juntos sin espacios entre ellos.

$('.a.b')

Así que para un elemento que tiene un ID de a con clases b y c, escribirías:

$('#a.b.c')
 2330
Author: Sasha Chedygov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-12 15:21:15

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

$(".a").filter(".b")
 150
Author: Jamie Love,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-30 13:56:34

Para el caso

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

Usted tendría que poner un espacio entre .a y .b.c

$('.a .b.c')
 103
Author: juanpaulo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-30 15:52:07

El problema que tienes es que estás usando un Group Selector, mientras que deberías usar un Multiples selector! Para ser más específico, estás usando $('.a, .b') mientras que deberías usar $('.a.b').

Para obtener más información, consulte la descripción general de las diferentes formas de combinar selectores aquí abajo!


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)

Seleccionar todo <input> elementos de type text, con las clases code y red:

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

Selector descendiente: "" (espacio)

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

$('p i')

Selector hijo: "> "

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

$('li > ul')

Selector de Hermanos adyacentes: "+ "

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

$('h2 + a')

Hermano general Selector: "~ "

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

$('div ~ span')
 49
Author: John Slegers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-29 14:44:03

$('.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>
 33
Author: user2298171,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-27 07:52:32

Solo mencione otro caso con elemento:

Por ejemplo <div id="title1" class="A B C">

Simplemente escriba: $("div#title1.A.B.C")

 22
Author: macio.Jun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-12-14 16:15:11

Solución de JavaScript de vainilla: -

document.querySelectorAll('.a.b')

 22
Author: Salman Abbas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-29 18:02:58

Para un mejor rendimiento puede utilizar

$('div.a.b')

Esto buscará solo a través de los elementos div en lugar de pasar por todos los elementos html que tiene en su página.

 16
Author: Tejas Shah,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-28 05:26:30

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 use esto

$(".a.b") 
 6
Author: Surya R Praveen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-17 13:57:26

No necesitas jQuery para esto

En Vanilla puedes hacer:

document.querySelectorAll('.a.b')
 1
Author: Sandwell,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-04 08:00:13

Puedes usar el método getElementsByClassName() 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í.

 0
Author: bahman parsamanesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-01 10:41:07