2009-05-28 12 views
240

Wie erkennt man am besten, wenn ein jQuery-Selektor ein leeres Objekt zurückgibt? Wenn Sie das tun:Wie kann ich feststellen, ob ein Selektor null zurückgibt?

alert($('#notAnElement')); 

Sie [object Object] erhalten, so wie ich es jetzt tun ist:

alert($('#notAnElement').get(0)); 

die "undefiniert" schreibt, und so können Sie einen Scheck tun für Das. Aber es scheint sehr schlecht zu sein. Welchen anderen Weg gibt es?

Antwort

446

Mein Favorit ist jQuery mit dieser kleinen Bequemlichkeit zu erweitern:

$.fn.exists = function() { 
    return this.length !== 0; 
} 

gebraucht wie:

$("#notAnElement").exists(); 

Deutlichere als Länge verwendet wird.

+0

das sieht sehr süß aus! Obwohl ich dies als beantwortet markiert habe, möchte ich immer noch mehr Vorschläge sehen ... (: – peirix

+3

Viel bessere Antwort als meine +1 –

+0

Danke dafür! Kann nicht bequemer als das! – Sneakyness

178
if ($("#anid").length) { 
    alert("element(s) found") 
} 
else { 
    alert("nothing found") 
} 
55

Der Selektor gibt ein Array von jQuery-Objekten zurück. Wenn keine übereinstimmenden Elemente gefunden werden, wird ein leeres Array zurückgegeben. Sie können die .length der vom Selektor zurückgegebenen Sammlung überprüfen oder prüfen, ob das erste Arrayelement 'undefiniert' ist.

Sie können beliebig die folgenden Beispiele innerhalb einer IF-Anweisung verwenden, und alle ergeben das gleiche Ergebnis. True, wenn der Selektor ein übereinstimmendes Element gefunden hat, andernfalls false.

$('#notAnElement').length > 0 
$('#notAnElement').get(0) !== undefined 
$('#notAnElement')[0] !== undefined 
+3

+1 zum Erklären Sie Ihre Antwort, anstatt nur einige Beispiel-Code bereitstellt. –

+0

Ich benutze '.length', es sei denn der Code ist heiß. Es ist sicherlich die klarste Absicht. Außerdem ist ['.size()'] (http://api.jquery.com/size/) veraltet und existiert seit Jahren (seit 1.8). Ich werde nur Ihre Antwort bearbeiten und diese entfernen, fühlen Sie sich frei, es mit einer Notiz zurück hinzuzufügen, aber es ist so alt, ich denke, es ist besser gegangen. –

+0

Technisch gibt es ein jQuery-Objekt zurück, das keine DOM-Knoten enthält. Sagen wir es gibt ein leeres Array ist nicht richtig. – Vigrant

33

Ich mag so etwas tun:

$.fn.exists = function(){ 
    return this.length > 0 ? this : false; 
} 

So können Sie etwas tun:

var firstExistingElement = 
    $('#iDontExist').exists() ||  //<-returns false; 
    $('#iExist').exists() ||   //<-gets assigned to the variable 
    $('#iExistAsWell').exists();  //<-never runs 

firstExistingElement.doSomething(); //<-executes on #iExist 

http://jsfiddle.net/vhbSG/

+0

Es ist ein Duplikat der angenommenen Antwort –

+3

@Ehsan Eigentlich ist es kein Duplikat der angenommenen Antwort ... Beachten Sie, dass die akzeptierte Antwort nur wahr/falsch zurückgibt, während diese Antwort entweder * das ursprüngliche Objekt * ("this") oder false zurückgibt. Mit dieser Antwort können Sie zusätzliche Daten mit dem Rückgabewert (z. B. zusätzliche Funktionsverkettung) eingeben, wenn es nicht falsch ist. – RSW

+0

Ich habe genau den gleichen Code in meinem Standard-Toolkit. Dieses Formular entspricht object.presence in Rails und ist sehr nützlich im Fallthrough-Konstrukt, das @CSharp beschreibt. – inopinatus

6

Meine Präferenz, und ich habe keine Ahnung, warum diese nicht bereits in jQuery ist:

$.fn.orElse = function(elseFunction) { 
    if (!this.length) { 
    elseFunction(); 
    } 
}; 

wie folgt verwendet:

$('#notAnElement').each(function() { 
    alert("Wrong, it is an element") 
}).orElse(function() { 
    alert("Yup, it's not an element") 
}); 

Oder, wie es in Coffeescript aussieht:

$('#notAnElement').each -> 
    alert "Wrong, it is an element"; return 
.orElse -> 
    alert "Yup, it's not an element" 
7

Ich mag presence, von Ruby on Rails inspiriert verwenden:

$.fn.presence = function() { 
    return this.length !== 0 && this; 
} 

Ihr Beispiel wird:

alert($('#notAnElement').presence() || "No object found"); 

Ich finde es besser als die vorgeschlagenen $.fn.exists, weil Sie noch Boolesche Operatoren oder if, aber das truthy Ergebnis ist nützlicher verwenden können.Ein weiteres Beispiel:

$ul = $elem.find('ul').presence() || $('<ul class="foo">').appendTo($elem) 
$ul.append('...') 
Verwandte Themen