jQuery выбирает по атрибуту, используя операторы AND и OR

Я думаю о том, возможно ли в 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 find operators jquery-selectors
person The Bndr    schedule 21.05.2012    source источник
comment
NB: вам не следует придумывать свои собственные атрибуты, такие как myc и myid. Если вы используете HTML5, добавьте к ним префикс data-: data-myc и data-myid.   -  person RoToRa    schedule 21.05.2012
comment
@RoToRa, есть ли документация в HTML5, в которой говорится, что вы должны это делать? Большинство веб-сайтов, которые я вижу, используют то, о чем думает мозг разработчика в то время...   -  person Alexis Wilke    schedule 15.08.2015
comment
То, что люди так делают, не означает, что это правильно. См. Раздел 3.2.1 HTML5: Авторы не должны использовать элементы , атрибуты или значения атрибутов, которые не разрешены этой спецификацией или другими применимыми спецификациями, поскольку это значительно усложняет расширение языка в будущем.   -  person RoToRa    schedule 17.08.2015
comment
Это плохой пример хорошего вопроса. Как насчет различных типов элементов, таких как входные данные?   -  person jesus g_force Harris    schedule 01.02.2018

Ответы (8)


arrow_upward
211
arrow_downward

Операция И

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

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

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

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

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

arrow_upward
18
arrow_downward

Простое использование .filter() [docs] (И ) с помощью множественный селектор [docs] (ИЛИ):

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

В общем, цепочка селекторов, таких как a.foo.bar[attr=value], является своего рода селектором AND.

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

person Felix Kling    schedule 21.05.2012
comment
знаете ли вы, если это быстрее, чем ответ от гейба? - person The Bndr; 21.05.2012
comment
Я не знаю, может быть, может быть, нет. - person Felix Kling; 21.05.2012

arrow_upward
10
arrow_downward

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

$('[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');
});

ДЕМО

person Selvakumar Arumugam    schedule 21.05.2012

arrow_upward
5
arrow_downward

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

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

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
person Guffa    schedule 21.05.2012
comment
Вам нужны эти цитаты? Я имею в виду просто для последовательности ... наверное, только я. ›.‹ - person Selvakumar Arumugam; 21.05.2012
comment
@Vega: вам не нужны кавычки для простых строк, таких как blue, но я не был уверен в числовых значениях, поэтому сохранил их. - person Guffa; 21.05.2012

arrow_upward
5
arrow_downward

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

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');
person Ja͢ck    schedule 21.05.2012

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person philnash    schedule 21.05.2012
comment
Я думаю, он хочет myc == blue && (id == 1 || id == 3) - person Selvakumar Arumugam; 21.05.2012
comment
Вам нужно повторить селектор [myc="blue"] во втором примере. - person RoToRa; 21.05.2012

arrow_upward
-1
arrow_downward

Чтобы правильно выбрать элементы с помощью указанных вами логических операций, вам просто нужно 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"]');
person mVChr    schedule 21.05.2012