jQuery Wybierz według atrybutu przy użyciu operatorów AND i OR

105

Zastanawiam się, czy w jQuery można wybierać elementy według nazwanych atrybutów za pomocą AND i OR.

Przykład:

<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>

Chciałbym zaznaczyć wszystkie elementy, myc="blue"ale tylko te z myidustawieniem 1 lub 3.

Więc spróbowałem:

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

ale to nie działa, to samo tutaj:

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

Czy jest to możliwe bez pisania specjalnych funkcji filtrujących?

jquery jquery-selectors find operators Bndr
źródło
7
NB: Nie powinieneś wymyślać własnych atrybutów, takich jak myci myid. Jeśli używasz HTML5, przedrostek ich zdata- : data-myci data-myid.
RoToRa
@RoToRa, czy w HTML5 jest dokumentacja, która mówi, że powinieneś to zrobić? Większość stron internetowych, które widzę, używa tego, o czym myśli deweloperów w tamtym czasie ...
Alexis Wilke
1
To, że ludzie to robią, nie oznacza, że ​​jest to poprawne. Patrz sekcja 3.2.1 HTML5 : „Autorzy nie mogą używać elementów, atrybutów ani wartości atrybutów, które nie są dozwolone w tej specyfikacji lub w innych mających zastosowanie specyfikacjach, ponieważ znacznie utrudni to rozszerzenie języka w przyszłości”.
RoToRa
1
To kiepski przykład dobrego pytania. A co z różnymi typami elementów, takimi jak dane wejściowe?
jesus g_force Harris

Odpowiedzi:

193

AND operacja

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

Operacja LUB , użyj przecinków

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

Jak skomentował @Vega:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Gabe
źródło
1
Myślę, że on chcemyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
2
jeśli używam a=$('[myc="blue"] [myid="1"],[myid="3"]');, to znaczy, ([myc="blue"] AND [myid="1"]) OR [myid="3"]czy ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) szukam drugiego // Edytuj: dziękuję za tę aktualizację! :-)
The Bndr
18

Proste użycie .filter() [dokumenty] (ORAZ) za pomocą selektora wielokrotnego [dokumenty] (LUB):

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

Ogólnie rzecz biorąc, selektory łańcuchowe, takie jak a.foo.bar[attr=value] to jest pewnego rodzaju selektor AND.

jQuery ma obszerną dokumentację na temat obsługiwanych selektorów, warto ją przeczytać.

Felix Kling
źródło
wiesz, czy to jest szybsze niż odpowiedź z Gabe?
Bndr
Nie wiem, może, może nie.
Felix Kling
10

Co powiesz na napisanie filtra takiego jak poniżej,

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

Edycja: @Jack Dzięki .. całkowicie to przegapiłem ..

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

PRÓBNY

Selvakumar Arumugam
źródło
5

Operator and w selektorze to po prostu pusty ciąg, a operator lub to przecinek.

Nie ma jednak grupowania ani priorytetu, więc musisz powtórzyć jeden z warunków:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Guffa
źródło
potrzebujesz tych cytatów? Mam na myśli tylko konsekwencję… prawdopodobnie tylko ja. >. <
Selvakumar Arumugam
1
@Vega: Nie potrzebujesz cudzysłowów do prostych ciągów znaków, takich jak blue, ale nie byłem pewien co do wartości liczbowych, więc je zachowałem.
Guffa
5

Najpierw znajdź warunek występujący we wszystkich sytuacjach, a następnie odfiltruj warunki specjalne:

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');
Jacek
źródło
1

W twoim szczególnym przypadku tak będzie 

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Paweł
źródło
0

JQuery używa selektorów CSS do wybierania elementów, więc wystarczy użyć więcej niż jednej reguły, oddzielając je przecinkami, tak jak:

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

Edytować:

Przepraszamy, chciałeś koloru niebieskiego i 1 lub 3. A co z:

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

Połączenie dwóch selektorów atrybutów daje ORAZ, a przecinek - LUB.

philnash
źródło
1
Myślę, że on chcemyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
Musisz powtórzyć [myc="blue"]selektor w drugim przykładzie.
RoToRa
-1

Aby prawidłowo wybrać elementy za pomocą operacji logicznych, które zostały powiedziane, wystarczy jQuery.filter()do ANDpracy, a nie „funkcje specjalne filtry”. Potrzebujesz również jQuery.add()do ORoperacji.

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

Alternatywnie można to osiągnąć używając skrótu w pojedynczym selektorze, gdzie zagłuszanie selektorów razem działa jak ANDznak, a oddzielenie przecinkiem działa jak OR:

var elements = $('[myc="blue"][myid="1"], [myid="3"]');
mVChr
źródło