jQuery-Auswahl nach Attribut mit den Operatoren AND und OR

103

Ich denke darüber nach, ob es in jQuery möglich ist, Elemente anhand benannter Attribute mit AND und OR auszuwählen.

Beispiel:

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

Ich möchte alle Elemente auswählen, bei denen myc="blue"jedoch nur diejenigen mit myid1 oder 3 festgelegt sind.

Also habe ich versucht:

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

aber es funktioniert nicht, gleich hier:

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

Ist es möglich, ohne spezielle Filterfunktionen zu schreiben?

jquery jquery-selectors find operators Der Bndr
quelle
7
NB: Sie sollten sich keine eigenen Attribute wie mycund ausdenken myid. Wenn Sie HTML5 verwenden, stellen Sie ihnen Folgendes voran data-: data-mycund data-myid.
RoToRa
@RoToRa, gibt es in HTML5 eine Dokumentation, die besagt, dass Sie dies tun sollten? Die meisten Websites, die ich sehe, verwenden alles, woran das Gehirn des Entwicklers gerade denkt ...
Alexis Wilke
1
Nur weil die Leute es tun, heißt das nicht, dass es richtig ist. Siehe HTML5, Abschnitt 3.2.1 : "Autoren dürfen keine Elemente, Attribute oder Attributwerte verwenden, die nach dieser Spezifikation oder anderen anwendbaren Spezifikationen nicht zulässig sind, da dies die zukünftige Erweiterung der Sprache erheblich erschwert."
RoToRa
1
Es ist ein schlechtes Beispiel für eine gute Frage. Was ist mit verschiedenen Elementtypen wie Eingaben?
Jesus G_force Harris

Antworten:

192

UND- Betrieb

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

ODER- Operation, Kommas verwenden

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

Wie @Vega kommentierte:

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');
Gabe
quelle
1
Ich denke, er will dasmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
2
Wenn ich benutze, a=$('[myc="blue"] [myid="1"],[myid="3"]');heißt das, ([myc="blue"] AND [myid="1"]) OR [myid="3"]oder ([myc="blue"]) AND ([myid="1"] OR [myid="3"]) ich suche nach dem 2. // Bearbeiten: Danke für das Update! :-)
The Bndr
18

Einfache Verwendung von .filter() [docs] (AND) mit dem Mehrfachselektor [docs] (OR):

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

Im Allgemeinen ist das Verketten von Selektoren wie a.foo.bar[attr=value]eine Art UND-Selektor.

jQuery verfügt über eine umfangreiche Dokumentation zu den unterstützten Selektoren. Es lohnt sich, sie zu lesen.

Felix Kling
quelle
Weißt du, ob dies schneller ist als die Antwort von Gabe?
Die Bndr
Ich weiß es vielleicht nicht.
Felix Kling
10

Wie wäre es, einen Filter wie unten zu schreiben?

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

Edit: @Jack Danke .. total verpasst ..

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

DEMO

Selvakumar Arumugam
quelle
5

Der Operator und in einem Selektor ist nur eine leere Zeichenfolge, und der Operator oder ist das Komma.

Es gibt jedoch keine Gruppierung oder Priorität, sodass Sie eine der folgenden Bedingungen wiederholen müssen:

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');
Guffa
quelle
Benötigen Sie diese Zitate? Ich meine nur aus Gründen der Konsistenz .. wahrscheinlich nur ich. >. <
Selvakumar Arumugam
1
@Vega: Sie brauchen keine Anführungszeichen für einfache Zeichenfolgen wie blue, aber ich war mir bei numerischen Werten nicht sicher, also habe ich sie beibehalten.
Guffa
5

Suchen Sie zuerst die Bedingung, die in allen Situationen auftritt, und filtern Sie dann die speziellen Bedingungen:

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

In Ihrem speziellen Fall wäre es 

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

JQuery verwendet CSS-Selektoren, um Elemente auszuwählen. Sie müssen also nur mehr als eine Regel verwenden, indem Sie sie durch Kommas trennen.

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

Bearbeiten:

Entschuldigung, Sie wollten blau und 1 oder 3. Wie wäre es mit:

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

Wenn Sie die beiden Attributselektoren zusammenfügen, erhalten Sie UND, wenn Sie ein Komma verwenden, erhalten Sie ODER.

Philnash
quelle
1
Ich denke, er will dasmyc == blue && (id == 1 || id == 3)
Selvakumar Arumugam
Sie müssen den [myc="blue"]Selektor im zweiten Beispiel wiederholen .
RoToRa
-1

Um die Elemente mit den von Ihnen angegebenen logischen Operationen richtig auszuwählen, benötigen Sie nur jQuery.filter()die ANDOperation, nicht "spezielle Filterfunktionen". Sie benötigen auch jQuery.add()für die OROperation.

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

Alternativ ist es möglich, die Kurzschrift in einem einzelnen Selektor zu verwenden, wobei das Zusammenfügen von Selektoren als ANDund das Trennen mit einem Komma als OR:

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