¿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.
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')
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")
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')
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')
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>
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")
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')
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.
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")
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')
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í.
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