jQuery виберіть за атрибутом, використовуючи оператори AND і OR

105

Я замислююся над тим, чи можна в jQuery вибрати елементи за названими атрибутами, використовуючи AND і OR.

Приклад:

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

Це можливо без написання спеціальних функцій фільтра?

— The Bndr
джерело

7

NB: Ви не повинні складати власні атрибути, такі як mycі myid. Якщо ви використовуєте префікс HTML5, їх data-: data-mycі data-myid.

— RoToRa

@RoToRa, чи є в HTML5 документація, яка говорить про те, що слід робити таке? Більшість веб-сайтів, які я бачу, використовують те, про що думає мозок розробника на той час ...

— Alexis Wilke

1

Тільки тому, що це роблять люди, це не означає, що це правильно. Див. Розділ 3.2.1 HTML5 : "Автори не повинні використовувати елементи, атрибути чи значення атрибутів, які не дозволені цією специфікацією чи іншими застосовними специфікаціями, оскільки це значно ускладнює розширення мови в майбутньому."

— RoToRa

1

Це поганий приклад хорошого питання. Що щодо різних типів елементів, таких як входи?

— issus 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)

— Сельвакумар Аррумгама

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 має велику документацію про підтримувані селектори, їх варто прочитати.

— Фелікс Клінг
джерело

чи знаєте ви, якщо це швидше, ніж відповідь від Gabe?

— Бндр

Я не знаю, може, може, й ні.

— Фелікс Клінг

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

DEMO

— Сельвакумар Аругагам
джерело

5

Оператор у селекторі - це лише порожня рядок, а оператор - кома.

Однак немає групування або пріоритету, тому вам доведеться повторити одне з умов:

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

— Гуффа
джерело

вам потрібні ці цитати? Я маю на увазі лише для послідовності .. напевно, тільки я. >. <

— Selvakumar Arumugam

1

@Vega: Вам не потрібні лапки для простих рядків типу blue, але я не був упевнений у числових значеннях, тому зберігав їх.

— Гуффа

5

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

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

— Ja͢ck
джерело

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)

— Сельвакумар Аррумгама

Вам потрібно повторити [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"]');

— mVChr
джерело