Вопрос: Как я могу выбрать элемент с несколькими классами в jQuery?


Я хочу выбрать все элементы, которые имеют два класса aа также b,

<element class="a b">

Итак, только те элементы, которые имеют и то и другое классы.

Когда я использую $(".a, .b")это дает мне союз, но я хочу пересечение.


1756


источник


Ответы:


Если вы хотите пересечение, просто напишите селекторам вместе без пробелов между.

$('.a.b')

Таким образом, для элемента с идентификатором aс классами bа также c, вы должны написать:

$('#a.b.c')

2270



Вы можете сделать это, используя filter()функция:

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

144



Для случая

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

Вам нужно будет установить промежуток между .aа также .b.c

$('.a .b.c')

95



The problem you're having, is that you are using a Group Selector, whereas you should be using a Multiples selector! To be more specific, you're using $('.a, .b') whereas you should be using $('.a.b').

For more information, see the overview of the different ways to combine selectors herebelow!


Group Selector : ","

Select all <h1> elements AND all <p> elements AND all <a> elements :

$('h1, p, a')

Multiples selector : "" (no character)

Select all <input> elements of type text, with classes code and red :

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

Descendant Selector : " " (space)

Select all <i> elements inside <p> elements:

$('p i')

Child Selector : ">"

Select all <ul> elements that are immediate children of a <li> element:

$('li > ul')

Adjacent Sibling Selector : "+"

Select all <a> elements that are placed immediately after <h2> elements:

$('h2 + a')

General Sibling Selector : "~"

Select all <span> elements that are siblings of <div> elements:

$('div ~ span')

45



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


29



Vanilla JavaScript solution:-

document.querySelectorAll('.a.b')


22



Just mention another case with element:

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

Just type: $("div#title1.A.B.C")


21



For better performance you can use

$('div.a.b')

This will look only through the div elements instead of stepping through all the html elements that you have on your page.


16



Group Selector

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

Becomes this:

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

So in your case you have tried the group selector whereas its an intersection

$(".a, .b") 

instead use this

$(".a.b") 

6



You do not need jQuery for this

In Vanilla you can do :

document.querySelectorAll('.a.b')

0