Comment puis-je sélectionner un élément avec plusieurs classes dans jQuery?

2062

Je veux sélectionner tous les éléments qui ont les deux classes aet b.

<element class="a b">

Donc, seuls les éléments qui ont les deux classes.

Quand je l'utilise $(".a, .b")ça me donne l'union, mais je veux l'intersection.

Mladen
la source
2
Ce serait bien si vous pouviez définir ce que l'union et l'intersection signifient pour nous newbs :)
Kolob Canyon
10
L'union et l'intersection @KolobCanyon sont des concepts de base de la théorie des ensembles. Ainsi, par exemple, une union serait tous francophones (comprend les hommes et les femmes), alors qu'une intersection serait toutes les femmes qui parlent français (exclut tous ceux qui ne parlent pas français et exclut toutes les personnes qui ne sont pas des femmes). Les unions et les intersections peuvent être faites avec un nombre quelconque de caractéristiques définissant chaque ensemble. en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory)
Katharine Osborne
6
Je pense que vous voulez dire que des deux ensembles "femmes" et "francophones", l'union serait toutes les femmes du monde et toutes les francophones du monde, un ensemble qui comprend les deux femmes qui ne parlent pas Hommes francophones et francophones. L'intersection, comme vous l'avez écrit, ne concerne que les femmes qui parlent français.
Teemu Leisti

Réponses:

2628

Si vous souhaitez faire correspondre uniquement les éléments avec les deux classes (une intersection, comme un ET logique), écrivez simplement les sélecteurs sans espaces entre les deux:

$('.a.b')

L'ordre n'est pas pertinent, vous pouvez donc également échanger les classes:

$('.b.a')

Donc, pour faire correspondre un divélément qui a un ID aavec avec des classes bet c, vous écririez:

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

(En pratique, vous n'avez probablement pas besoin d'obtenir ce détail, et un ID ou un sélecteur de classe suffit généralement:. $('#a'))

Sasha Chedygov
la source
9
@Flater: C'était juste à titre d'exemple. Mais cela peut être utile si les classes bet csont ajoutées dynamiquement, et vous ne souhaitez sélectionner l'élément que s'il possède ces classes.
Sasha Chedygov
3
Aha, bon point :-) Jusqu'à présent, j'aurais utilisé .hasClass () mais c'est une bien meilleure notation.
Flater
4
Cette méthode de sélection fonctionne également pour CSS, par exemple .ab {propriétés de style} voir: css-tricks.com/multiple-class-id-selectors
Chris Halcrow
30
@Shimmy: Oui. Un espace entre deux sélecteurs signifie que vous recherchez des descendants; c'est à dire .a .brecherche des éléments avec classe bqui sont des descendants d'un élément avec classe a. Donc, quelque chose comme div ane retournera aque les éléments qui sont à l' intérieur d' un divélément.
Sasha Chedygov
2
@AaA: C'est incorrect; il en est ainsi depuis le début de jQuery, car c'est ainsi que CSS fonctionne. Une virgule sélectionne des éléments qui correspondent à l'un des sélecteurs (pensez-y comme un OU logique), pas aux deux, donc ce n'est pas la même chose (bien que je puisse voir comment cela pourrait être déroutant).
Sasha Chedygov
174

Vous pouvez le faire en utilisant la filter()fonction:

$(".a").filter(".b")
Jamie Love
la source
16
Quelle est la différence entre cette réponse et la réponse acceptée?
Vivian River
49
@Rice: Celui-ci sera un peu plus lent, car il créera d'abord une liste d'objets avec la classe "a", puis supprimera tous sauf ceux qui ont la classe "b", tandis que le mien le fait en une seule étape. Mais sinon, aucune différence.
Sasha Chedygov, le
5
Cela a fonctionné pour moi dans une instance où je cherchais une classe définie comme variable, ce qui ne fonctionnait pas avec la syntaxe du premier exemple. par exemple: $ ('. foo'). filter (variable). Merci
pac
7
@pac: $ ('. foo' + variable) aurait dû faire l'affaire, mais je peux voir où cette méthode serait plus claire dans ce cas.
Sasha Chedygov
6
Ceci est également plus efficace si vous en avez déjà trouvé .aet que vous devez filtrer plusieurs classes arbitraires basées sur plusieurs fois et qui appartiennent également à l' .aensemble d' origine .
Qix - MONICA A ETE BRUTEE
123

Pour le cas

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

Vous auriez besoin de mettre un espace entre .aet.b.c

$('.a .b.c')
juanpaulo
la source
Pour compléter votre réponse, j'aimerais savoir comment accéder à la fois à b et à c si le cas est le suivant: <element class = "a"> <element class = "b"> </element> <element class = "c" > </element> </element>? Grâce à $ ('. A .b.c') donne un résultat incorrect.
Ipsita Rout
Dans cet exemple, le sélecteur $('.a .c.b')fonctionnerait-il également?
Daniel W.
Oui, car la commande n'a pas d'importance.
Zim84
$('.a > element')
Alex
63

Le problème que vous rencontrez est que vous utilisez un Group Selector, alors que vous devriez utiliser un Multiples selector! Pour être plus précis, vous utilisez $('.a, .b')alors que vous devriez utiliser $('.a.b').

Pour plus d'informations, consultez l'aperçu des différentes façons de combiner les sélecteurs ci-dessous!


Sélecteur de groupe: ","

Sélectionnez tous les <h1>éléments ET tous les <p>éléments ET tous les <a>éléments:

$('h1, p, a')

Sélecteur de multiples: "" (pas de caractère)

Sélectionnez tous les <input>éléments de type text, avec les classes codeet red:

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

Sélecteur de descendants: "" (espace)

Sélectionnez tous les <i>éléments à l'intérieur des <p>éléments:

$('p i')

Sélecteur d'enfant: ">"

Sélectionnez tous les <ul>éléments qui sont les enfants immédiats d'un <li>élément:

$('li > ul')

Sélecteur de frère adjacent: "+"

Sélectionnez tous les <a>éléments placés immédiatement après les <h2>éléments:

$('h2 + a')

Sélecteur général de frères et sœurs: "~"

Sélectionnez tous les <span>éléments qui sont frères et sœurs d' <div>éléments:

$('div ~ span')
John Slegers
la source
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>

user2298171
la source
26

Il suffit de mentionner un autre cas avec élément:

Par exemple <div id="title1" class="A B C">

Tapez simplement: $("div#title1.A.B.C")

macio.Jun
la source
26

Solution JavaScript vanille: -

document.querySelectorAll('.a.b')

Salman von Abbas
la source
20

Pour de meilleures performances, vous pouvez utiliser

$('div.a.b')

Cela ne regardera que les éléments div au lieu de parcourir tous les éléments html que vous avez sur votre page.

Tejas Shah
la source
9

Sélecteur de groupe

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;}

Devient ceci:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Donc, dans votre cas, vous avez essayé le sélecteur de groupe alors que c'est une intersection

$(".a, .b") 

utilisez plutôt ceci

$(".a.b") 
Surya R Praveen
la source
4

Vous n'avez pas besoin jQueryde cette

En Vanillavous pouvez faire:

document.querySelectorAll('.a.b')
Sandwell
la source
Vrai en 2018, mais pas quand cette question a été posée en 2009
Michiel
3

votre code $(".a, .b")fonctionnera pour plusieurs éléments ci-dessous (en même temps)

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

si vous voulez sélectionner un élément ayant a et b à la fois comme <element class="a b">utiliser js sans coma

$('.a.b')
Savan
la source
2

Vous pouvez utiliser la getElementsByClassName()méthode pour ce que vous voulez.

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>

C'est aussi la solution la plus rapide. vous pouvez voir une référence à ce sujet ici .

bahman parsamanesh
la source
1

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

Karim Ali
la source