2012-05-21 12 views
73

Zastanawiam się, czy w jQuery jest możliwe wybieranie elementów według nazwanych atrybutów za pomocą AND i OR.jQuery wybierz według atrybutu używając operatorów 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 gdzie myc="blue" ale tylko te z myid ustawiony na 1 lub 3.

więc pró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 to możliwe bez pisania specjalnych funkcji filtrowania?

+6

NB: Nie należy tworzących własne atrybuty, takie jak 'myc' i' myid'. Jeśli używasz HTML5, przedrostkuj je za pomocą 'data-': 'data-myc' i' data-myid'. – RoToRa

+0

Wow, 8 odpowiedzi w 10 minut .. wygląda na to, że zadałem pytanie noob. Przepraszam! : -/ –

+1

@ TheBndr Nie, to interesujące pytanie, a większość odpowiedzi ma różne podejścia, a twoje pytanie ma 3 upvotes + 2 fav .. zdecydowanie dobre pytanie. –

Odpowiedz

132

I operacja

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

LUB operacja używać przecinków

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

Jak skomentował @Vega:

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

Myślę, że chce mieć 'myc == niebieski && (id == 1 || id == 3)' –

+1

jeśli używam 'a = $ ('[myc =" blue "] [myid =" 1 "] , [myid = "3"] ");" czy to oznacza '([myc =" blue "] AND [myid =" 1 "]) OR [myid =" 3 "]' lub '([myc =" niebieski "]) AND ([myid =" 1 "] OR [myid =" 3 "])' Szukam drugiego // Edycja: dziękuję za tę aktualizację! :-) –

11

Jak o pisaniu filtru jak poniżej,

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

Edit: @Jack Dzięki .. całkowicie przegapić ..

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

DEMO

+0

To 'myid', a nie' id' :) –

+0

@Jack Totally ominęło to .. Dziękuję! –

-1

JQuery wykorzystuje selektorów CSS, aby wybrać elementy, więc po prostu trzeba użyć więcej niż jedną regułę przez oddzielając je przecinkami, tak jak podano:

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

Edit:

Niestety, chciałeś niebiesko-1 lub 3. Jak o:

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

Umieszczenie dwóch selektorów atrybutów razem daje i za pomocą przecinka daje OR.

+1

Myślę, że chce "myc == blue && (id == 1 || id == 3)' –

+0

Dzięki Vega, zaktualizowany. – philnash

+0

Powtórz wybieranie '[myc =" blue "]' w drugim przykładzie. – RoToRa

-1

Aby poprawnie wybrać elementy za pomocą operacji logicznych, które podałeś, potrzebujesz tylko jQuery.filter() dla operacji AND, a nie "specjalnych funkcji filtrowania". Potrzebujesz również jQuery.add() dla operacji OR.

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

Alternatywnie, jest możliwe do osiągnięcia za pomocą skrótów w jednym przełącznikiem, gdzie zakłócającego selektory razem działa jako AND i oddzielającego z A działa przecinkami jako OR:

var elements = $('[myc="blue"][myid="1"], [myid="3"]'); 
5

elementu I operatora selektor to po prostu pusty ciąg, a operatorem lub jest przecinek.

Nie ma jednak grupowanie lub priorytet, więc trzeba powtórzyć jeden z warunków:

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

Czy potrzebujesz tych ofert? Chodzi mi o konsystencję ... prawdopodobnie tylko ja. >. < –

+1

@Vega: Nie potrzebujesz cytatów dla prostych ciągów takich jak 'blue', ale nie byłem pewien wartości liczbowych, więc je zachowałem. – Guffa

1

W tym szczególnym przypadku byłoby

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

Proste użycie .filter()[docs] (I) przy użyciu multiple selector[docs] (OR)

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

ogólnie łańcuchowym selektory Li ke a.foo.bar[attr=value] to jakiś rodzaj selektora AND.

jQuery ma extensive documentation o obsługiwanych selektorach, warto przeczytać.

+0

czy wiesz, że jest to szybsze niż odpowiedź od gabe? –

+0

Nie wiem, może, może nie. –

5

Najpierw znajdź stan, który występuje we wszystkich sytuacjach, a następnie filtrować specjalne warunki:

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