jQuery OR Selector?

Question

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

Answer 1

Verwenden Sie ein Komma.

'.classA, .classB'

Sie können das Leerzeichen auch weglassen.

Answer 2

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

En .add() Methode fügt die ausgewählten Elemente der Ergebnismenge hinzu:

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

Es ist ausführlicher als '.classA, .classB' , ermöglicht aber die Erstellung komplexerer Selektoren wie dem folgenden:

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

Answer 3

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

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

Damit können Sie effektiv sagen: "Holen Sie sich dieses Element, oder wenn dieses Element nicht existiert, verwenden Sie dieses Element". Zum Beispiel:

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

Die akzeptierte Antwort bietet zwar eine ähnliche Funktionalität wie diese, aber wenn beide Selektoren (vor und nach dem Komma) vorhanden sind, werden beide Selektoren zurückgegeben.

Ich hoffe, es ist hilfreich für alle, die über Google auf dieser Seite landen.

Answer 4

Wenn Sie das Standardkonstrukt von element = element1 || element2 verwenden möchten, bei dem JavaScript das erste Element zurückgibt, das der Wahrheit entspricht, können Sie genau das tun:

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

was das erste tatsächlich gefundene Element zurückgeben würde. Aber ein besserer Weg wäre wahrscheinlich das jQuery-Selektor-Komma-Konstrukt (das ein Array der gefundenen Elemente zurückgibt) auf diese Weise zu verwenden:

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

die das erste gefundene Element zurückgibt.

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

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

die alle li mit der Klasse active zurückgibt oder, falls es keine gibt, nur die letzte li zurückgibt.

Beides wird funktionieren. Es gibt jedoch potenzielle Leistungseinbußen, da der || die Verarbeitung stoppt, sobald er etwas Wahres findet, während der Array-Ansatz versucht, alle Elemente zu finden, selbst wenn er bereits eines gefunden hat. Andererseits könnte die Verwendung des ||-Konstrukts zu Leistungsproblemen führen, wenn es mehrere Selektoren durchlaufen muss, bevor es den einen findet, den es zurückgibt, weil es das Haupt-JQuery-Objekt für jeden einzelnen aufrufen muss (ich weiß wirklich nicht, ob das ein Leistungseinbruch ist oder nicht, es scheint nur logisch, dass es einer sein könnte). Im Allgemeinen, obwohl, ich verwende die Array-Ansatz, wenn der Selektor eine ziemlich lange Zeichenfolge ist.

Answer 5

Endlich habe ich herausgefunden, wie man das macht:

div:not(:not(.classA,.classB)) > span

(wählt div mit Klasse classA OR classB mit direkter Kinderspanne)