22

Как выбрать элемент с несколькими классами в jQuery?

26

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

<element class="a b">

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

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

4 ответ(ов)

28

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

$('.a.b')

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

$('.b.a')

Чтобы выбрать элемент div, у которого ID — это a, а классы — b и c, вы можете записать:

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

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

1

Для вашего случая

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

вам необходимо добавить пробел между селекторами .a и .b.c, чтобы правильно выбрать элемент. Это будет выглядеть следующим образом:

$('.a .b.c')

Таким образом, первый селектор .a выберет элемент с классом a, а пробел указывает на то, что селектор .b.c должен находиться внутри элемента с классом a.

0

Вы можете использовать следующий код jQuery для того, чтобы выбрать элементы с классами .b и .c, находящиеся внутри элемента с классом .a и применить к ним стиль границы:

$('.a .b, .a .c').css('border', '2px solid yellow');
// выбирает элементы b и c

В этом коде .a .b и .a .c выступают в роли селекторов, которые выбирают элементы с классами b и c, находящиеся внутри элемента с классом a.

Вот пример HTML-кода, который соответствует вашему вопросу:

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

В результате выполнения данного кода, элементы с классами b и c будут обведены жёлтой границей шириной 2 пикселя. Элемент с классом d останется без изменений, так как он не попадает под селекторы.

0

Вы можете использовать селектор jQuery для выбора элемента, указав идентификатор и классы. Например, если у вас есть элемент:

<div id="title1" class="A B C"></div>

Вы можете написать следующий код jQuery:

$("div#title1.A.B.C")

В этом селекторе div#title1 указывает на элемент с ID title1, а A.B.C указывает на наличие классов A, B и C.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь