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

Question

Je souhaite sélectionner tous les éléments ayant les deux classes a et b.

<element class="a b">

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

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

Answer 1

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

$('.a.b')

La commande n'est pas pertinente, 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 écrirez:

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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 code et red:

.

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

Sélecteur de descendants: " " (espace)

Sélectionnez tous les <i> éléments à l'intérieur de <ul> éléments:

$('p i')

Sélecteur d'enfants: & "; > &";

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

$('li > ul')

Sélecteur de fratrie adjacent: & "; + &";

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

$('h2 + a')

Sélecteur de parenté générale: & "; ~ &";

Sélectionnez tous les <=> éléments frères de <=> éléments:

$('div ~ span')

Answer 5

$('.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>

Answer 6

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

E.g. <div id="title1" class="A B C">

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

Answer 7

Solution JavaScript Vanilla: -

document.querySelectorAll('.a.b')

Answer 8

Pour de meilleures performances, vous pouvez utiliser

$('div.a.b')

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

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

Answer 10

Vous n'avez pas besoin de jQuery cette option

Dans Vanilla vous pouvez faire:

document.querySelectorAll('.a.b')

Answer 11

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 consulter un repère à propos de cette ici .