Вопрос по jquery, jquery-selectors, css-selectors, javascript – Как я могу выбрать элемент с несколькими классами в jQuery?

1889

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

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

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

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

Я думаю, что вы имеете в виду, что из двух наборов "женщины" и «франкоязычные», объединением будут все женщины в мире и все франкоязычные в мире, набор, который включает как женщин, которые не говорят по-французски, так и франкоязычных мужчин. Пересечение, как вы написали, только те женщины, которые говорят по-французски. Teemu Leisti
Было бы хорошо, если бы вы могли определить, что означает объединение и пересечение для нас, новичков :) Kolob Canyon
@KolobCanyon объединение и пересечение являются основными понятиями теории множеств. Так, например, в союзе будут все носители французского языка (включая мужчин и женщин), тогда как на пересечении будут все женщины, говорящие по-французски (исключая всех, кто не говорит по-французски, и исключая всех людей, которые не являются женщинами). Объединения и пересечения могут быть сделаны с любым количеством характеристик, определяющих каждый набор.en.wikipedia.org/wiki/Union_(set_theory) en.wikipedia.org/wiki/Intersection_(set_theory) Katharine Osborne

Ваш Ответ

11   ответов
25

document.querySelectorAll('.a.b')

2419

Если вы хотите сопоставить только элементы сboth классы (пересечение, как логическое И), просто написать селекторы вместеwithout spaces между:

$('.a.b')

Порядок не имеет значения, поэтому вы также можете поменять местами классы:

$('.b.a')

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

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

(На практике вам, скорее всего, не нужно получать эту конкретную информацию, и идентификатора или селектора класса обычно достаточно:$('#a').)

@Flater: это было просто ради примера. Но это может быть полезно, если классыb а такжеc динамически добавляются, и вы хотите выбрать элемент, только если у него есть эти классы.
Этот метод выбора также работает для CSS, например .a.b {style properties} см .:css-tricks.com/multiple-class-id-selectors
@AaA: это неверно; так было с самого начала jQuery, потому что так работает CSS. Запятая выбирает элементы, которые соответствуют любому из селекторов (воспринимаем его как логическое ИЛИ), а не оба, так что это не одно и то же (хотя я вижу, как это может сбивать с толку).
@ Шимми: Да. Пробел между двумя селекторами означает, что вы ищете потомков; то есть.a .b ищет элементы с классомb которые являются потомками элемента с классомa, Так что-то вродеdiv a вернется толькоa элементы, которыеinside div элемент.
Ага, хорошая мысль :-) До сих пор я бы использовал .hasClass (), но это намного лучшая запись.
18

$('div.a.b')

Это будет смотреть только через элементы div вместо того, чтобы переходить через все элементы html, которые есть на вашей странице.

36

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

56

с которой вы столкнулись, заключается в том, что вы используетеGroup Selectorв то время как вы должны использоватьMultiples selector! Чтобы быть более конкретным, вы используете$('.a, .b') тогда как вы должны использовать$('.a.b').

Для получения дополнительной информации см. Обзор различных способов комбинирования селекторов ниже!

Group Selector : ","

Выбрать все<h1> элементы И все<p> элементы И все<a> элементы:

$('h1, p, a')
Multiples selector : "" (no character)

Выбрать все<input> элементыtype textс занятиямиcode а такжеred :

$('input[type="text"].code.red')
Descendant Selector : " " (space)

Выбрать все<i> элементы внутри<p> элементы:

$('p i')
Child Selector : ">"

Выбрать все<ul> элементы, которые являются непосредственными детьми<li> элемент:

$('li > ul')
Adjacent Sibling Selector : "+"

Выбрать все<a> элементы, которые размещаются сразу после<h2> элементы:

$('h2 + a')
General Sibling Selector : "~"

Выбрать все<span> элементы, которые являются братьями и сестрами<div> элементы:

$('div ~ span')
1

getElementsByClassName() метод для того, что вы хотите.

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>

Это также самое быстрое решение. вы можете увидеть тест об этомВот.

3

jQuery за это

ВVanilla ты можешь сделать :

document.querySelectorAll('.a.b')
Правда в 2018 году, но не когда этот вопрос был задан в 2009 году
8

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

Становится так:

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

Итак, в вашем случае вы пробовали селектор группы, тогда как его пересечение

$(".a, .b") 

вместо этого используйте это

$(".a.b") 
112

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

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

$('.a .b.c')
В этом примере будет селектор$('.a .c.b') тоже работаешь?
$('.a > element')
@IpsitaRout$('.a .b, .a .c') должен сделать трюк
Да, так как порядок не имеет значения.
Добавляя к вашему ответу, я хотел бы знать, как получить доступ к b и c, если описанный ниже случай: & lt; element class = & quot; a & gt; & lt; element class = & quot; b & quot; & lt; / element & gt; & lt; element class = & quot; c & quot; & lt; / element & gt; & Lt; / элемент & GT; ? Через $ ('.a .b.c') выдает неправильный результат.
161

filter() функция:

$(".a").filter(".b")
В чем разница между этим ответом и принятым?
@pac: $ («переменная .foo» +) должна была сделать свое дело, но я вижу, где этот метод будет более понятным в этом случае.
Это также более эффективно, если вы уже нашли.aи должны фильтровать несколько раз на основе разных произвольных классов, которые также принадлежат оригиналу.a задавать.
Это работало для меня в случае, когда я искал класс, определенный как переменную, который не работал с синтаксисом в первом примере. например: $ («.foo»). фильтр (переменная). Спасибо
@Rice: этот будет немного медленнее, потому что он создаст список объектов с классом & quot; a & quot; сначала удалите все, кроме тех, которые имеют класс "b", тогда как мой делает это за один шаг. Но в остальном без разницы.
25

Например.<div id="title1" class="A B C">

Просто введите:$("div#title1.A.B.C")

Похожие вопросы