2010-02-15 2 views
284

Ich frage mich, ob es eine Möglichkeit gibt, "ODER" Logik in jQuery Selektoren zu haben. Zum Beispiel weiß ich, dass ein Element entweder ein Nachkomme eines Elements mit der Klasse classA oder classB ist, und ich möchte etwas wie elem.parents('.classA or .classB') tun. Bietet jQuery solche Funktionalität?jQuery ODER Selektor?

Antwort

432

Verwenden Sie ein Komma.

'.classA, .classB' 

Sie können den Speicherplatz weglassen.

+36

Es sollte beachtet werden, dass dies nicht wirklich ein 'oder' Selektor ist, mehr wie mehrere Selektoren in einem. – alex

+42

@alex: aber es wird nicht zweimal das selbe Element auswählen (was ein Verkettungsoperator wäre). Es ist wirklich ein OR-Selektor, weil es eine UNION von zwei oder mehr Mengen erzeugt (während AND eine Kreuzung ist). – cletus

+0

Danke, das funktioniert. Wegen einer Fehlerbehebungsüberprüfung dachte ich, dass die Verwendung eines Kommas "AND" bedeutet. – Suan

61

Die Verwendung eines Kommas ist möglicherweise nicht ausreichend, wenn Sie mehrere jQuery-Objekte haben, die verbunden werden müssen.

Die .add() Methode fügt die ausgewählten Elemente in die Ergebnismenge:

// classA OR classB 
jQuery('.classA').add('.classB'); 

Es ist ausführlicher als '.classA, .classB', aber können Sie komplexere Selektoren wie folgt aufbauen:

// (classA which has <p> descendant) OR (<div> ancestors of classB) 
jQuery('.classA').has('p').add(jQuery('.classB').parents('div')); 
15

ich geschrieben habe ein unglaublich einfaches (5 Zeilen Code) Plugin für genau diese Funktionalität:

http://byrichardpowell.github.com/jquery-or/

Es erlaubt Ihnen effektiv zu sagen "Holen Sie sich dieses Element, oder wenn dieses Element nicht existiert, verwenden Sie dieses Element". Zum Beispiel:

$('#doesntExist').or('#exists'); 

Während die akzeptierte Antwort ähnliche Funktionalität wie diese liefert, wenn beide Selektoren (vor & nach dem Komma) vorhanden ist, werden beide Selektoren zurückgegeben.

Ich hoffe, es ist hilfreich für jeden, der auf dieser Seite über Google landen könnte.

+4

So funktioniert der boolesche OR-Operator nicht. Wenn beide Selektoren Elemente zurückgeben, sollte der Operator OR alle und nicht nur die Elemente des ersten Selektors zurückgeben. Ihr Plugin sollte "ifEmpty" oder "else" oder so ähnlich heißen. – Alp

+9

@Alp: Betrachte das Verhalten von '" a "|| "b" 'vs.' null || "b" 'in Vanille JS. Wenn wir hier das gleiche Verhalten anwenden, sollte '$ (a) .oder (b)' '$ (a)' zurückgeben, falls es existiert, andernfalls sollte es '$ (b)' zurückgeben. Ich denke nicht, dass mit dieser Nomenklatur etwas nicht stimmt, da das "oder" dem Verhalten der JS "||" entspricht. (oder) Betreiber. – FtDRbwLXw6

+3

Ich sehe es auch als "oder". Worüber andere reden, ist eher eine "concat" oder "merge" Aktion. –

13

Wenn Sie das Standardkonstrukt element = element1 || verwenden möchten element2 wo JavaScript die erste zurück, die truthy ist, könnten Sie genau das tun:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound'); 

, die das erste Element zurückkehren würde, die tatsächlich gefunden wird. Aber ein besserer Weg wäre wahrscheinlich das jQuery-Selektor Komma Konstrukt zu verwenden (die eine Reihe von gefundenen Elementen zurückzugibt) in dieser Art und Weise:

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0]; 

, die das erste gefundene Elemente zurück.

Ich verwende das von Zeit zu Zeit, um entweder ein aktives Element in einer Liste oder ein Standardelement zu finden, wenn es kein aktives Element gibt. Zum Beispiel:

element = $('ul#someList').find('li.active, li:first')[0] 

die jede li mit einer Klasse von aktiven zurückkehren oder, sollte es keine geben, wird nur die letzte li zurück.

Entweder wird funktionieren. Es gibt jedoch mögliche Leistungseinbußen, da || stoppt die Verarbeitung, sobald etwas truthy gefunden wird, während der Array-Ansatz versucht, alle Elemente zu finden, selbst wenn sie bereits eine gefunden hat.Dann wieder mit dem || Konstrukt könnte möglicherweise Leistungsprobleme haben, wenn es mehrere Selektoren durchlaufen muss, bevor es den einen findet, den es zurückgibt, weil es das jQuery-Hauptobjekt für jedes aufrufen muss (ich weiß wirklich nicht, ob das ein Leistungstreffer ist oder nicht, es scheint nur logisch, dass es sein könnte). Im Allgemeinen verwende ich den Array-Ansatz, wenn der Selektor eine ziemlich lange Zeichenfolge ist.

0

Daniel A. White Lösung funktioniert gut für Klassen.

Ich habe eine Situation, wo ich Eingabefelder wie donee_1_card finden musste, wobei 1 ein Index ist.

Meine Lösung hat

gewesen
$("input[name^='donee']" && "input[name*='card']") 

Obwohl ich nicht sicher bin, wie optimal ist.