Question 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 a et b.

<element class="a b">

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

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


1771
2018-06-24 22:28


origine


Réponses:


Si vous voulez une intersection, écrivez simplement les sélecteurs ensemble sans espaces entre.

$('.a.b')

Donc, pour un élément qui a un ID de a avec des cours b et c, tu écrirais:

$('#a.b.c')

2291
2018-06-24 22:30



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

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

147
2018-06-24 22:34



Pour l'affaire

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

Vous auriez besoin de mettre un espace entre .a et .b.c

$('.a .b.c')

97
2018-03-25 20:31



Le problème que vous rencontrez, c'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 la présentation des différentes manières de combiner les sélecteurs ci-dessous!


Group Selector: ","

Tout sélectionner <h1> éléments ET tous <p> éléments ET tous <a> éléments :

$('h1, p, a')

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

Tout sélectionner <input> des éléments de type  text, avec des cours code et red :

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

Sélecteur descendant: "" (espace)

Tout sélectionner <i> éléments à l'intérieur <p> éléments:

$('p i')

Sélecteur d'enfant: ">"

Tout sélectionner <ul> éléments qui sont les enfants immédiats d'un <li> élément:

$('li > ul')

Sélecteur de sibling adjacent: "+"

Tout sélectionner <a> éléments qui sont placés immédiatement après <h2> éléments:

$('h2 + a')

Sélecteur général de fratrie: "~"

Tout sélectionner <span> éléments qui sont frères et sœurs de <div> éléments:

$('div ~ span')

45
2018-01-20 22:24



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


30
2018-04-19 07:19



Solution JavaScript Vanilla: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02



Mentionnez simplement un autre cas avec élément:

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

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


22
2017-12-14 16:15



Pour de meilleures performances, vous pouvez utiliser

$('div.a.b')

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


16
2017-09-28 05:26



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

Au lieu de cela, utilisez

$(".a.b") 

6
2018-05-17 13:57



Tu n'as pas besoin jQuery pour ça

Dans Vanilla tu peux faire :

document.querySelectorAll('.a.b')

1
2018-04-04 08:00



Vous pouvez utiliser 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 la solution la plus rapide également. vous pouvez voir un point de repère à ce sujet ici.


0
2017-08-01 10:41