Wie kann ich feststellen, ob ein Selektor null zurückgibt?


271

Was ist der beste Weg, um festzustellen, ob ein jQuery-Selektor ein leeres Objekt zurückgibt? Wenn Sie tun:

alert($('#notAnElement'));

Du bekommst [Objekt Objekt], also mache ich es jetzt so:

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

Das wird "undefined" schreiben, und so können Sie das überprüfen. Aber es scheint sehr schlimm. Welchen anderen Weg gibt es?

Antworten:


494

Mein Favorit ist es, jQuery mit diesem winzigen Komfort zu erweitern:

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

Verwendet wie:

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

Expliziter als die Verwendung von Länge.


2
Warum hast du 'dies' in ein $ () gewickelt? Würde 'dies' in diesem Zusammenhang nicht tatsächlich auf ein jQuery-Objekt verweisen?
Adham Atta

1
Ich finde, dass die Rückkehr thisviel hilfreicher ist als true. Siehe meine Antwort zur Portierung der Rails- presenceMethode.
Marc-André Lafortune

5
Wenn Sie die Fähigkeit zur Verkettung beibehalten möchten, wenn die Funktion true zurückgibt oder wenn Sie diese Methode zum Zuweisenthis einer Variablen verwenden möchten, würde ich empfehlen , die return-Anweisung in CSharp zu ändern .
Hanna

1
Magnar, können Sie bitte erklären, wie diese "Erweiterungs" -Funktion tatsächlich funktioniert? Ich gehe davon aus, dass es sich um ein Javascript-Konzept handelt und nicht ausschließlich um ein JQuery-Konzept. Ich habe mich mit Prototyping befasst, bin mir aber nicht sicher, ob dies hier zutrifft und warum die Syntax "$ .fn" lautet.
KyleM

3
@ Adam Ja. In diesem Fall sollten Sie jedoch die Exist-Prüfung einfach löschen, da jQuery funktioniert. Es wird einfach nichts tun, wenn kein Element mit dem Selektor übereinstimmt.
Magnar

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

67

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 .lengthvom Selektor zurückgegebene Sammlung überprüfen oder prüfen, ob das erste Array-Element 'undefiniert' ist.

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

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

1
Ich benutze, es .lengthsei denn, der Code ist heiß. Es ist sicherlich das klarste mit Absicht. Auch .size()ist veraltet und seit Jahren (seit 1.8). Ich werde nur Ihre Antwort bearbeiten und diese entfernen. Sie können sie gerne mit einer Notiz wieder hinzufügen, aber sie ist so alt, dass ich denke, sie ist besser weg.
Evan Carroll

1
Technisch gesehen wird ein jQuery-Objekt zurückgegeben, das keine DOM-Knoten enthält. Es ist nicht richtig zu sagen, dass ein leeres Array zurückgegeben wird.
Vigrant

39

Ich mache gerne so etwas:

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

Dann können Sie so 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/


6
@Ehsan Eigentlich ist es kein Duplikat der akzeptierten Antwort ... Beachten Sie, dass die akzeptierte Antwort nur true / false zurückgibt, während diese Antwort entweder das ursprüngliche Objekt ("this") oder false zurückgibt . Mit dieser Antwort können Sie zusätzliche Aufgaben mit dem Rückgabewert ausführen (z. B. Verkettung zusätzlicher Funktionen), wenn dieser nicht falsch ist.
RSW

1
Ich habe genau den gleichen Code in meinem Standard-Toolkit. Dieses Formular entspricht object.presence in Rails und ist in dem von @CSharp beschriebenen Fallthrough-Konstrukt sehr nützlich.
Inopinatus

Dies ist eine gute Antwort, aber es wäre hilfreich, wenn Sie erklären, was passiert, wenn KEINES der getesteten Elemente vorhanden ist. Kurze Antwort : TypeError: firstExistingElement.doSomething is not a function. Sie können die gesamte Variablenzuweisung / den Test in ein if () einschließen und nur dann etwas tun, wenn ein Element gefunden wird ....
Stephen R

9

Ich benutze gerne presence, inspiriert von Ruby on Rails :

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

Ihr Beispiel wird:

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

Ich finde es dem vorgeschlagenen überlegen, $.fn.existsweil Sie immer noch boolesche Operatoren oder verwenden können if, aber das wahrheitsgemäße Ergebnis ist nützlicher. Ein anderes Beispiel:

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

7

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

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

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


0

Möglicherweise möchten Sie dies standardmäßig die ganze Zeit tun. Ich habe versucht, die jquery-Funktion oder die jquery.fn.init-Methode zu umbrechen, um dies ohne Fehler zu tun, aber Sie können dazu einfach die jquery-Quelle ändern. Enthalten sind einige umgebende Linien, nach denen Sie suchen können. Ich empfehle, jquery source nach zu suchenThe jQuery object is actually just the init constructor 'enhanced'

var
  version = "3.3.1",

  // Define a local copy of jQuery
  jQuery = function( selector, context ) {

    // The jQuery object is actually just the init constructor 'enhanced'
    // Need init if jQuery is called (just allow error to be thrown if not included)
    var result = new jQuery.fn.init( selector, context );
    if ( result.length === 0 ) {
      if (window.console && console.warn && context !== 'failsafe') {
        if (selector != null) {
          console.warn(
            new Error('$(\''+selector+'\') selected nothing. Do $(sel, "failsafe") to silence warning. Context:'+context)
          );
        }
      }
    }
    return result;
  },

  // Support: Android <=4.0 only
  // Make sure we trim BOM and NBSP
  rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

jQuery.fn = jQuery.prototype = {

Last but not least können Sie den unkomprimierten jquery-Quellcode hier herunterladen: http://code.jquery.com/

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.