jQuery выбирает по атрибуту с помощью операторов И и ИЛИ

105

Я думаю, можно ли в jQuery выбирать элементы по именованным атрибутам с помощью И и ИЛИ.

Пример:

<div myid="1" myc="blue">1</div>
<div myid="2" myc="blue">2</div>
<div myid="3" myc="blue">3</div>
<div myid="4">4</div>

Я хотел бы выбрать все элементы, myc="blue"но только те, для которых myidустановлено значение 1 или 3.

Итак, я попробовал:

a=$('[myc="blue"] [myid="1"]  [myid="3"]');

но это не работает, то же самое здесь:

a=$('[myc="blue"] && [myid="1"] || [myid="3"]');

Можно ли без написания специальных функций фильтра?

jquery jquery-selectors find operators Бндр
источник
7
NB: Вы не должны придумывать свои собственные атрибуты, такие как mycи myid. Если вы используете HTML5, добавьте к ним префикс data-: data-mycи data-myid.
RoToRa
@RoToRa, есть ли документация в HTML5, в которой говорится, что вы должны это делать? Большинство веб-сайтов, которые я вижу, используют все, что думает в то время мозг разработчика ...
Алексис Уилке,
1
То, что люди так поступают, не означает, что это правильно. См. Раздел 3.2.1 HTML5 : «Авторы не должны использовать элементы, атрибуты или значения атрибутов, которые не разрешены данной спецификацией или другими применимыми спецификациями, так как это значительно усложняет расширение языка в будущем».
RoToRa
1
Это плохой пример хорошего вопроса. А как насчет различных типов элементов, таких как входы?
jesus g_force Harris

Ответы:

193

И операция

a=$('[myc="blue"][myid="1"][myid="3"]');

Операция ИЛИ , используйте запятые

a=$('[myc="blue"],[myid="1"],[myid="3"]');

Как прокомментировал @Vega:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Гейб
источник
1
Я думаю, он хочет продвигаетсяmyc == blue && (id == 1 || id == 3)
Selvakumar Арумугам
2
если я использую a=$('[myc="blue"] [myid="1"],[myid="3"]');, означает ли это, ([myc="blue"] AND [myid="1"]) OR [myid="3"]или ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) я ищу второй // Изменить: спасибо за это обновление! :-)
The Bndr
18

Простое использование .filter() [docs] (AND) с использованием множественного селектора [docs] (OR):

$('[myc="blue"]').filter('[myid="1"],[myid="2"]');

В общем, объединение селекторов в цепочку, вроде как a.foo.bar[attr=value]какой-то селектор И.

jQuery имеет обширную документацию о поддерживаемых селекторах, ее стоит прочитать.

Феликс Клинг
источник
ты знаешь, если это быстрее, чем ответ от Габе?
The Bndr
Не знаю, может быть, а может и нет.
Феликс Клинг
10

Как насчет написания фильтра, как показано ниже,

$('[myc="blue"]').filter(function () {
   return (this.id == '1' || this.id == '3');
});

Изменить: @Jack Спасибо .. полностью пропустил ..

$('[myc="blue"]').filter(function() {
   var myId = $(this).attr('myid');   
   return (myId == '1' || myId == '3');
});

ДЕМО

Сельвакумар Арумугам
источник
5

Оператор and в селекторе - это просто пустая строка, а оператор или - это запятая.

Однако здесь нет группировки или приоритета, поэтому вам нужно повторить одно из условий:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Гуффа
источник
тебе нужны эти цитаты? Я имею в виду просто для последовательности ... наверное, только я. >. <
Сельвакумар Арумугам
1
@Vega: Вам не нужны кавычки для простых строк вроде blue, но я не был уверен насчет числовых значений, поэтому я оставил их.
Guffa
5

Сначала найдите условие, которое встречается во всех ситуациях, затем отфильтруйте особые условия:

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');
Разъем
источник
1

В вашем особом случае это будет 

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Павел
источник
0

JQuery использует селекторы CSS для выбора элементов, поэтому вам просто нужно использовать более одного правила, разделяя их запятыми, например:

a=$('[myc="blue"], [myid="1"], [myid="3"]');

Редактировать:

Извините, вы хотели синий и 1 или 3. Как насчет:

a=$('[myc="blue"][myid="1"],  [myid="3"]');

Соединение двух селекторов атрибутов вместе дает вам И, использование запятой дает вам ИЛИ.

Филнаш
источник
1
Я думаю, он хочет продвигаетсяmyc == blue && (id == 1 || id == 3)
Selvakumar Арумугам
Вам нужно повторить [myc="blue"]селектор во втором примере.
RoToRa
-1

Чтобы правильно выбрать элементы, используя указанные вами логические операции, вам нужны jQuery.filter()только ANDоперации, а не «специальные функции фильтрации». Вам также понадобится jQuery.add()для ORоперации.

var elements = $('[myc="blue"]').filter('[myid="1"').add('[myid="3"');

В качестве альтернативы можно использовать сокращение в одном селекторе, где селекторы помех вместе действуют как, ANDа разделение запятой действует как OR:

var elements = $('[myc="blue"][myid="1"], [myid="3"]');
мВч
источник