web-dev-qa-db-fra.com

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

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

<element class="a b">

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

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

javascriptjquerycss-selectorsjquery-selectors
1947
Mladen

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

$('.a.b')

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

$('.b.a')

Donc, pour faire correspondre un élément div ayant un identifiant de a avec les classes b et c, vous écririez:

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

(En pratique, vous n'avez probablement pas besoin d'obtenir cette information, et un sélecteur d'identifiant ou de classe suffit en général: $('#a').)

2499
Sasha Chedygov

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

$(".a").filter(".b")
166
Jamie Love

Pour le cas

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

Vous devez insérer un espace entre .a et .b.c

$('.a .b.c')
115
juanpaulo

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 manières 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électionne tous les éléments _<input>_ de typetext, avec les classes code et red:

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

Sélecteur de descendants: "" (espace)

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

_$('p i')
_

Sélecteur d'enfants: ">"

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

_$('li > ul')
_

Sélecteur de fratrie adjacent: "+"

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

_$('h2 + a')
_

Sélecteur Général des frères et sœurs: "~"

Sélectionnez tous les éléments _<span>_ frères de l'un des éléments _<div>_:

_$('div ~ span')
_
57
John Slegers
$('.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>
36
user2298171

Il suffit de mentionner un autre cas avec element:

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

Il suffit de taper: $("div#title1.A.B.C")

25
macio.Jun

Solution JavaScript Vanille: -

document.querySelectorAll('.a.b')

25
Salman for Hire

Pour de meilleures performances, vous pouvez utiliser

$('div.a.b')

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

18
Tejas Shah

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")
8
Surya R Praveen

Vous n'avez pas besoin de jQuery pour cela

Dans Vanilla vous pouvez faire:

document.querySelectorAll('.a.b')
3
Sandwell

Vous pouvez utiliser la méthode getElementsByClassName() 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 un point de repère à ce sujet ici .

1
bahman parsamanesh