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

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.

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

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

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

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

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

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

Solution JavaScript vanille: -

document.querySelectorAll('.a.b')

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.

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

Vous n'avez pas besoin jQueryde cette

En Vanillavous pouvez faire:

document.querySelectorAll('.a.b')

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

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 .

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