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"]');

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

— Бндр
источник

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"]');

— мВч
источник