Gibt es eine "Existiert" -Funktion für jQuery?

Wie kann ich die Existenz eines Elements in jQuery überprüfen?

Der aktuelle Code, den ich habe, ist folgender:

if ($(selector).length > 0) {
    // Do something
}

Gibt es einen eleganteren Weg, dies zu erreichen? Vielleicht ein Plugin oder eine Funktion?

In JavaScript ist alles "wahr" oder "falsch", und für Zahlen 0(und NaN) bedeutet falsealles andere true. Sie könnten also schreiben:

if ($(selector).length)

Du brauchst diesen >0Teil nicht.

Ja!

jQuery.fn.exists = function(){ return this.length > 0; }

if ($(selector).exists()) {
    // Do something
}

Dies ist eine Antwort auf: Herding Code Podcast mit Jeff Atwood

Wenn du benutzt hast

jQuery.fn.exists = function(){return ($(this).length > 0);}
if ($(selector).exists()) { }

Sie würden implizieren, dass eine Verkettung möglich war, wenn dies nicht der Fall ist.

Das wäre besser:

jQuery.exists = function(selector) {return ($(selector).length > 0);}
if ($.exists(selector)) { }

Alternativ aus den FAQ :

if ( $('#myDiv').length ) { /* Do something */ }

Sie können auch Folgendes verwenden. Wenn das jQuery-Objektarray keine Werte enthält, wird das Abrufen des ersten Elements im Array undefiniert zurückgegeben.

if ( $('#myDiv')[0] ) { /* Do something */ }

Sie können dies verwenden:

// if element exists
if($('selector').length){ /* do something */ }

// if element does not exist
if(!$('selector').length){ /* do something */ }

Der schnellste und semantisch selbsterklärendste Weg, die Existenz zu überprüfen, ist die Verwendung von plain JavaScript:

if (document.getElementById('element_id')) {
    // Do something
}

Das Schreiben ist etwas länger als die Alternative zur jQuery-Länge, wird jedoch schneller ausgeführt, da es sich um eine native JS-Methode handelt.

Und es ist besser als die Alternative, eine eigene jQueryFunktion zu schreiben . Diese Alternative ist aus den von @snover angegebenen Gründen langsamer. Es würde aber auch anderen Programmierern den Eindruck vermitteln, dass die exists()Funktion jQuery eigen ist. JavaScriptwürde / sollte von anderen verstanden werden, die Ihren Code bearbeiten, ohne die Wissensverschuldung zu erhöhen.

NB: Beachten Sie das Fehlen eines '#' vor dem element_id(da dies nur JS ist, nicht jQuery).

Sie können einige Bytes speichern, indem Sie Folgendes schreiben:

if ($(selector)[0]) { ... }

Dies funktioniert, weil sich jedes jQuery-Objekt auch als Array tarnt, sodass wir den Array-Dereferenzierungsoperator verwenden können, um das erste Element aus dem Array abzurufen . Es wird zurückgegeben, undefinedwenn sich am angegebenen Index kein Element befindet.

Sie können verwenden:

if ($(selector).is('*')) {
  // Do something
}

Ein wenig elegante, vielleicht.

Dieses Plugin kann in einer ifAnweisung wie if ($(ele).exist()) { /* DO WORK */ }oder mithilfe eines Rückrufs verwendet werden.

Plugin

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case 'function':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case 'object':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == 'function') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == 'object' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == 'string') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case 'string':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == 'function') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == 'function') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

Sie können einen oder zwei Rückrufe angeben. Der erste wird ausgelöst, wenn das Element vorhanden ist, der zweite wird ausgelöst, wenn das Element nicht vorhanden ist. Wenn Sie jedoch nur eine Funktion übergeben, wird diese nur ausgelöst, wenn das Element vorhanden ist. Somit stirbt die Kette, wenn das ausgewählte Element dies nicht tut existiert. Wenn es existiert, wird natürlich die erste Funktion ausgelöst und die Kette wird fortgesetzt.

Beachten Sie, dass die Verwendung der Rückrufvariante zur Aufrechterhaltung der Verkettbarkeit beiträgt - das Element wird zurückgegeben und Sie können Befehle wie bei jeder anderen jQuery-Methode weiter verketten!

Beispielverwendungen

if ($.exist('#eleID')) {    /*    DO WORK    */ }        //    param as STRING
if ($.exist($('#eleID'))) { /*    DO WORK    */ }        //    param as jQuery OBJECT
if ($('#eleID').exist()) {  /*    DO WORK    */ }        //    enduced on jQuery OBJECT

$.exist('#eleID', function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
}, function() {            //    param is STRING && CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element DOES NOT EXIST    */
})

$('#eleID').exist(function() {            //    enduced on jQuery OBJECT with CALLBACK METHOD
    /*    DO WORK    */
    /*    This will ONLY fire if the element EXIST    */
})

$.exist({                        //    param is OBJECT containing 2 key|value pairs: element = STRING, callback = METHOD
    element: '#eleID',
    callback: function() {
        /*    DO WORK    */
        /*    This will ONLY fire if the element EXIST    */
    }
})

Ich sehe, dass die meisten Antworten hier nicht genau sind, wie sie sein sollten. Sie überprüfen die Elementlänge. In vielen Fällen kann dies in Ordnung sein , aber nicht zu 100% . Stellen Sie sich vor, die Zahl wird stattdessen an die Funktion übergeben, und ich prototypisiere eine Funktion, die alle überprüft Bedingungen und geben Sie die Antwort zurück, wie es sein sollte:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

Dadurch werden sowohl Länge als auch Typ überprüft. Jetzt können Sie dies folgendermaßen überprüfen:

$(1980).exists(); //return false
$([1,2,3]).exists(); //return false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); //return false
$([{nodeName: 'foo'}]).exists() // returns false
$('div').exists(); //return true
$('.header').exists(); //return true
$(document).exists(); //return true
$('body').exists(); //return true

JQuery ist wirklich nicht erforderlich. Mit einfachem JavaScript ist es einfacher und semantisch korrekter:

if(document.getElementById("myElement")) {
    //Do something...
}

Wenn Sie dem Element aus irgendeinem Grund keine ID hinzufügen möchten, können Sie dennoch eine andere JavaScript-Methode verwenden, die für den Zugriff auf das DOM entwickelt wurde.

jQuery ist wirklich cool, aber lassen Sie reines JavaScript nicht in Vergessenheit geraten ...

Sie könnten dies verwenden:

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something*/}

Der Grund, warum alle vorherigen Antworten den .lengthParameter erfordern , ist, dass sie meistens den $()Selektor von jquery verwenden, der querySelectorAll hinter den Vorhängen hat (oder ihn direkt verwenden). Diese Methode ist ziemlich langsam, da der gesamte DOM-Baum analysiert werden muss, um nach allen Übereinstimmungen mit diesem Selektor zu suchen und ein Array mit diesen zu füllen.

Der Parameter ['length'] wird nicht benötigt oder ist nicht nützlich, und der Code ist viel schneller, wenn Sie ihn direkt verwenden document.querySelector(selector), da er das erste Element zurückgibt, mit dem er übereinstimmt, oder null, wenn er nicht gefunden wird.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

Bei dieser Methode bleibt jedoch das tatsächlich zurückgegebene Objekt erhalten. Das ist in Ordnung, wenn es nicht als Variable gespeichert und wiederholt verwendet wird (so dass die Referenz erhalten bleibt, wenn wir es vergessen).

var myel=elementIfExists("#myid");
// now we are using a reference to the element which will linger after removal
myel.getParentNode.removeChild(myel);
console.log(elementIfExists("#myid")); /* null */
console.log(myel); /* giant table lingering around detached from document */
myel=null; /* now it can be garbage collected */

In einigen Fällen kann dies erwünscht sein. Es kann in einer for-Schleife wie folgt verwendet werden:

/* locally scoped myel gets garbage collected even with the break; */
for (var myel; myel = elementIfExist(sel); myel.getParentNode.removeChild(myel))
    if (myel == myblacklistedel) break;

Wenn Sie das Element nicht wirklich benötigen und nur ein wahres / falsches Element erhalten / speichern möchten, verdoppeln Sie es einfach nicht !! Es funktioniert für Schuhe, die sich lösen. Warum also hier knoten?

function elementExists(selector){
    return !!document.querySelector(selector);
}
/* usage: */
var hastables = elementExists("table");  /* will be true or false */
if (hastables){
    /* insert css style sheet for our pretty tables */
}
setTimeOut(function (){if (hastables && !elementExists("#mytablecss"))
                           alert("bad table layouts");},3000);

Ist $.contains()was du willst

jQuery.contains( container, contained )

Die $.contains()Methode gibt true zurück, wenn das vom zweiten Argument bereitgestellte DOM-Element ein Nachkomme des vom ersten Argument bereitgestellten DOM-Elements ist, unabhängig davon, ob es sich um ein direktes untergeordnetes oder tiefer verschachteltes Element handelt. Andernfalls wird false zurückgegeben. Es werden nur Elementknoten unterstützt. Wenn das zweite Argument ein Text- oder Kommentarknoten ist, $.contains()wird false zurückgegeben.

Hinweis : Das erste Argument muss ein DOM-Element sein, kein jQuery-Objekt oder einfaches JavaScript-Objekt.

Ich habe festgestellt if ($(selector).length) {}, dass dies nicht ausreicht. Es wird Ihre App stillschweigend beschädigen, wenn selectores sich um ein leeres Objekt handelt {}.

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

Mein einziger Vorschlag ist, eine zusätzliche Prüfung durchzuführen {}.

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

Ich bin immer noch auf der Suche nach einer besseren Lösung, da diese etwas schwer ist.

Edit: WARNUNG! Dies funktioniert im IE nicht, wenn selectores sich um eine Zeichenfolge handelt.

$.isEmptyObject('hello') // FALSE in Chrome and TRUE in IE

Sie können überprüfen, ob das Element vorhanden ist oder nicht, indem Sie die Länge im Java-Skript verwenden. Wenn die Länge größer als Null ist, ist das Element vorhanden. Wenn die Länge Null ist, ist das Element nicht vorhanden

// These by Id
if ($("#elementid").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

// These by Class
if ($(".elementClass").length > 0) {
  // Element is Present
} else {
  // Element is not Present
}

Die Überprüfung der Existenz eines Elements ist auf der offiziellen jQuery-Website selbst übersichtlich dokumentiert!

Verwenden Sie die Eigenschaft .length der von Ihrem Selektor zurückgegebenen jQuery-Auflistung:

if ($("#myDiv").length) {
    $("#myDiv").show();
}

Beachten Sie, dass nicht immer geprüft werden muss, ob ein Element vorhanden ist. Der folgende Code zeigt das Element an, falls es vorhanden ist, und führt nichts (ohne Fehler) aus, wenn dies nicht der Fall ist:

$("#myDiv").show();

Dies ist allen Antworten sehr ähnlich, aber warum nicht den !Operator zweimal verwenden, damit Sie einen Booleschen Wert erhalten:

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

if ($(selector).exists()) {
    // the element exists, now what?...
}

$(selector).length && //Do something

Versuchen Sie, auf DOMElemente zu testen

if (!!$(selector)[0]) // do stuff

Inspiriert von Hiways Antwort fand ich Folgendes:

$.fn.exists = function() {
    return $.contains( document.documentElement, this[0] );
}

jQuery.contains verwendet zwei DOM-Elemente und prüft, ob das erste das zweite enthält.

Die Verwendung document.documentElementals erstes Argument erfüllt die Semantik der existsMethode, wenn wir sie nur anwenden möchten, um die Existenz eines Elements im aktuellen Dokument zu überprüfen.

Im Folgenden habe ich ein Snippet zusammengestellt, das jQuery.exists()mit dem $(sel)[0]und den $(sel).lengthAnsätzen verglichen wird truthy, für die beide Werte für $(4)while $(4).exists()zurückgeben false. Im Zusammenhang mit der Überprüfung der Existenz eines Elements im DOM scheint dies das gewünschte Ergebnis zu sein .

$.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
  var testFuncs = [
    function(jq) { return !!jq[0]; },
    function(jq) { return !!jq.length; },
    function(jq) { return jq.exists(); },
  ];
    
  var inputs = [
    ["$()",$()],
    ["$(4)",$(4)],
    ["$('#idoexist')",$('#idoexist')],
    ["$('#idontexist')",$('#idontexist')]
  ];
  
  for( var i = 0, l = inputs.length, tr, input; i < l; i++ ) {
    input = inputs[i][1];
    tr = "<tr><td>" + inputs[i][0] + "</td><td>"
          + testFuncs[0](input) + "</td><td>"
          + testFuncs[1](input) + "</td><td>"
          + testFuncs[2](input) + "</td></tr>";
    $("table").append(tr);
  }

td { border: 1px solid black }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idoexist">#idoexist</div>
<table style>
<tr>
  <td>Input</td><td>!!$(sel)[0]</td><td>!!$(sel).length</td><td>$(sel).exists()</td>
</tr>
</table>
<script>
  
  $.fn.exists = function() {
    return $.contains(document.documentElement, this[0]); 
  }
  
</script>

Keine Notwendigkeit für jQuery (Basislösung)

if(document.querySelector('.a-class')) {
  // do something
}

Viel leistungsfähigere Option unten (beachten Sie das Fehlen eines Punktes vor einer Klasse).

if(document.getElementsByClassName('a-class')[0]) {
  // do something
}

querySelector verwendet eine geeignete Matching-Engine wie $ () (sizzle) in jQuery und verbraucht mehr Rechenleistung, reicht jedoch in 99% der Fälle aus. Die zweite Option ist expliziter und teilt dem Code genau mit, was zu tun ist. Laut jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25 ist es viel schneller

Ich benutze einfach gerne einfaches Vanille-Javascript, um dies zu tun.

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}

Ich bin auf diese Frage gestoßen und möchte einen Codeausschnitt teilen, den ich derzeit verwende:

$.fn.exists = function(callback) {
    var self = this;
    var wrapper = (function(){
            function notExists () {}

            notExists.prototype.otherwise = function(fallback){
                if (!self.length) {                    
                    fallback.call();
                }
            };

            return new notExists;
        })();

    if(self.length) {
        callback.call();    
    }

    return wrapper;
}

Und jetzt kann ich Code wie diesen schreiben -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

Es mag viel Code sein, aber wenn es in CoffeeScript geschrieben ist, ist es ziemlich klein:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

Ich hatte einen Fall, in dem ich sehen wollte, ob ein Objekt in einem anderen vorhanden ist, also habe ich der ersten Antwort etwas hinzugefügt, um nach einem Selektor im Selektor zu suchen.

// Checks if an object exists.
// Usage:
//
//     $(selector).exists()
//
// Or:
// 
//     $(selector).exists(anotherSelector);
jQuery.fn.exists = function(selector) {
    return selector ? this.find(selector).length : this.length;
};

Wie wäre es mit:

function exists(selector) {
    return $(selector).length;
}

if (exists(selector)) {
    // do something
}

Es ist sehr minimal und erspart es Ihnen, den Selektor $()jedes Mal einzuschließen .

Ich benutze dies:

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

Führen Sie die Kette nur aus, wenn ein jQuery-Element vorhanden ist - http://jsfiddle.net/andres_314/vbNM3/2/

Hier ist meine Lieblingsmethode existin jQuery

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

und eine andere Version, die Rückruf unterstützt, wenn kein Selektor vorhanden ist

$.fn.exist = function(onExist, onNotExist) {
    return $(this).each(function() {
        var target = $(this);

        if (this.length > 0) {
            if (typeof onExist === 'function') {
                onExist.call(target);
            }
        } else {
            if (typeof onNotExist === 'function') {
                onNotExist.call(target);
            }
        }
    });
};

Beispiel:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

$("selector") gibt ein Objekt zurück, das die lengthEigenschaft hat. Wenn der Selektor Elemente findet, werden diese in das Objekt aufgenommen. Wenn Sie also die Länge überprüfen, können Sie feststellen, ob Elemente vorhanden sind. 0 == falseWenn Sie in JavaScript nicht 0Ihren Code erhalten, wird er ausgeführt.

if($("selector").length){
   //code in the case
} 

Hier ist das vollständige Beispiel für verschiedene Situationen und die Möglichkeit, mithilfe von direct zu überprüfen, ob ein Element vorhanden ist, wenn der jQuery-Selektor möglicherweise funktioniert oder nicht, da er ein Array oder Elemente zurückgibt.

var a = null;

var b = []

var c = undefined ;

if(a) { console.log(" a exist")} else { console.log("a doesn't exit")}
// output: a doesn't exit

if(b) { console.log(" b exist")} else { console.log("b doesn't exit")}
// output: b exist

if(c) { console.log(" c exist")} else { console.log("c doesn't exit")}
// output: c doesn't exit

ENDGÜLTIGE LÖSUNG

if($("#xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
//output : xusyxxs doesnn't exist

if($(".xysyxxs").length){ console.log("xusyxxs exist")} else { console.log("xusyxxs doesnn't exist") }
    //output : xusyxxs doesnn't exist

Sie müssen nicht überprüfen, ob es größer als 0ähnlich ist $(selector).length > 0, $(selector).lengthes ist genug und eine elegante Möglichkeit, die Existenz von Elementen zu überprüfen. Ich denke nicht, dass es sich lohnt, nur dafür eine Funktion zu schreiben, wenn Sie mehr zusätzliche Dinge tun möchten, ja.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}