Питання Як я можу вибрати елемент з декількома класами у jQuery?


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

<element class="a b">

Отже, тільки ті елементи, які мають обидва заняття

Коли я використовую $(".a, .b") це дає мені союз, але я хочу перехрестя.


1774
2018-06-24 22:28


походження


Було б непогано, якщо б ви могли визначити, що об'єднання та перетин означають для нас новинки :) - Kolob Canyon
@ColobCanyon союз і перетин є основними теоріями теорії концепцій. Так, наприклад, союз міг би бути всім французьким (включаючи чоловіків і жінок), тоді як перехрестя будуть всі жінки, які говорять по-французьки (виключають всіх, хто не володіє французькою мовою та виключає всіх людей, які не є жінками). Союзи та перехрестя можуть бути зроблені з будь-яким числом характеристик, що визначають кожен набір. en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
Я думаю, ви маєте на увазі те, що з двох наборів - "жінки" та "франкомовні", союз - це всі жінки в світі та всі французи у світі, набір, який включає в себе і тих жінок, які не говорять Французькі та франкомовні люди. На перехресті, як ви писали, тільки ті жінки, які говорять по-французьки. - Teemu Leisti


Відповіді:


Якщо ви хочете перехрестя, просто напишіть селектори разом без пропусків між.

$('.a.b')

Тому для елемента, який має ідентифікатор a з класами b і c, ви пишете:

$('#a.b.c')

2293
2018-06-24 22:30



@Flater: Це було просто заради прикладу. Але це може бути корисно, якщо класи b і c динамічно додаються, і ви тільки хочете вибрати елемент, якщо він має ці класи. - Sasha Chedygov
Ага, добрий момент :-) До цих пір я б використовував .hasClass (), але це шлях кращого позначення. - Flater
Цей метод вибору також працює для CSS, наприклад .a.b {властивості стилю} див. css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@Схімія: так. Пропуск між двома селекторами означає, що ви шукаєте нащадків; тобто .a .bпошук елементів із класом b що є нащадками елемента з класом a. Так щось подібне div a тільки повернеться a елементи, які є всередині a div елемент - Sasha Chedygov
@AaA: це неправильно; це було з самого початку роботи jQuery, тому що саме так працює CSS. Комма вибирає елементи, які відповідають одному з селекторів (думати про це як логічний OR), а не обидва, тому це не одне й те саме (хоча я бачу, як це може бути заплутаним). - Sasha Chedygov


Ви можете зробити це за допомогою filter() функція:

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

147
2018-06-24 22:34



Яка різниця між цією відповіддю та прийнятою? - Daniel Allen Langdon
@Rice: це буде трохи повільніше, оскільки воно спочатку складе список об'єктів з класом "a", а потім видалити всі, крім тих, що мають клас "b", тоді як шахта робить це за один крок. Але інакше ніякої різниці. - Sasha Chedygov
Це працювало для мене в тому випадку, коли я шукав клас, визначений як змінна, яка не працювала з синтаксисом в першому прикладі. наприклад: $ ('. foo'). filter (змінна). Дякую - pac
@pac: $ ('. foo' + змінна) повинна була зробити трюк, але я бачу, де цей метод буде більш чітким у такому випадку. - Sasha Chedygov
Це також ефективніше, якщо ви вже знайшли .aі потрібно фільтрувати кілька разів на основі різних умовних класів, які також належать до оригіналу .a встановити - Qix


Для справи

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

Вам потрібно буде помістити пробіл .a і .b.c

$('.a .b.c')

97
2018-03-25 20:31



Додавання до вашої відповіді Я хотів би знати, як отримати доступ до обох b та c, якщо випадок виглядає таким чином: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Через $ ('.a.b.c') дається неправильний результат. - Ipsita Rout
@ IpsitaRout $('.a .b, .a .c') повинен зробити трюк - Mr47
У цьому прикладі буде селектор $('.a .c.b') також працювати? - DanFromGermany


Проблема, яка виникає, полягає в тому, що ви використовуєте Group Selector, тоді як ви повинні використовувати Multiples selector! Щоб бути більш конкретним, ви використовуєте $('.a, .b') тоді як ви повинні використовувати $('.a.b').

Щоб дізнатись більше, перегляньте огляд способів об'єднання селекторів нижче!


Груповий селектор: ","

Вибрати все <h1> елементи І все <p> елементи І все <a> елементи:

$('h1, p, a')

Мульті селектор: "" (без символу)

Вибрати все <input> елементи Росії type  text, з класами code і red :

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

Вибір спадщини: "" (пробіл)

Вибрати все <i> елементи усередині <p> елементи:

$('p i')

Дитячий селектор: ">"

Вибрати все <ul> елементи, які є безпосередніми дітьми a <li> елемент:

$('li > ul')

Сусідній селектор братів: "+"

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

$('h2 + a')

Загальний вибір селекціонерів: "~"

Вибрати все <span> елементи, які є братами і сестрами <div> елементи:

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





Рішення ванільного JavaScript: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





Просто згадайте іншу справу з елементом:

Наприклад, <div id="title1" class="A B C">

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


22
2017-12-14 16:15