Gibt es eine „exists“-Funktion für jQuery?

Question

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

Der aktuelle Code, den ich habe, ist dieser:

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

Gibt es eine elegantere Möglichkeit, dies anzugehen?Vielleicht ein Plugin oder eine Funktion?

Answer 1

In JavaScript ist alles „wahr“ oder „falsch“, und das gilt auch für Zahlen 0 (und NaN) bedeutet false, alles andere true.Man könnte also schreiben:

if ($(selector).length)

Das brauchst du nicht >0 Teil.

Answer 2

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

Answer 3

Wenn Sie verwendet haben

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

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

Das wäre besser:

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

Alternative, aus den FAQ:

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

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

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

Answer 4

Sie können Folgendes verwenden:

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

---

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

Answer 5

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

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

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

Und es ist besser als die Alternative, selbst zu schreiben jQuery Funktion.Diese Alternative ist aus den von @snover genannten Gründen langsamer.Es würde aber auch bei anderen Programmierern den Eindruck erwecken, dass das exists() Funktion ist etwas, das jQuery innewohnt. JavaScript würde/sollte von anderen, die Ihren Code bearbeiten, ohne erhöhte Wissensschuld verstanden werden.

Hinweis: Beachten Sie das Fehlen eines „#“ vor dem element_id (da dies reines JS ist, nicht jQuery).

Answer 6

Sie können ein paar Bytes sparen, indem Sie Folgendes schreiben:

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

Dies funktioniert, weil jedes jQuery-Objekt auch als Array maskiert wird, sodass wir den Array-Dereferenzierungsoperator verwenden können, um das erste Element aus dem abzurufen Array.Es kehrt zurück undefined wenn am angegebenen Index kein Element vorhanden ist.

Answer 7

Sie können Folgendes verwenden:

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

A wenig eleganter vielleicht.

Answer 8

Dieses Plugin kann in einem verwendet werden if Aussage wie if ($(ele).exist()) { /* DO WORK */ } oder über einen Rückruf.

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 vorhanden ist nicht existieren.Wenn Sie jedoch nur eine Funktion übergeben, wird diese nur ausgelöst, wenn das Element vorhanden ist.Daher wird die Kette sterben, wenn das ausgewählte Element dies tut nicht existieren.Wenn es existiert, wird natürlich die erste Funktion ausgelöst und die Kette wird fortgesetzt.

Beachten Sie, dass Sie bei der Verwendung von Die Rückrufvariante trägt zur Aufrechterhaltung der Verkettbarkeit bei – Das Element wird zurückgegeben und Sie können wie bei jeder anderen jQuery-Methode mit der Befehlsverkettung fortfahren!

Beispielanwendungen

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    */
    }
})

Answer 9

Ich sehe die meisten Antworten hier nicht genau Wie es sein sollte, überprüfen sie die Elementlänge, das kann sein OK In vielen Fällen, aber nicht zu 100 %, stellen Sie sich vor, dass die Zahl stattdessen an die Funktion übergeben wird, also prototypiere ich eine Funktion, die alle Bedingungen überprüft und die Antwort so zurückgibt, wie sie 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 es 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

Answer 10

Es besteht eigentlich keine Notwendigkeit für jQuery.Mit einfachem JavaScript ist es einfacher und semantisch korrekter, Folgendes zu überprüfen:

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

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

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

Answer 11

Sie könnten Folgendes verwenden:

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

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

Answer 12

Der Grund, warum alle vorherigen Antworten das erfordern .length Parameter ist, dass sie hauptsächlich Jquerys verwenden $() Selektor, der querySelectorAll hinter den Kulissen hat (oder sie verwenden ihn direkt).Diese Methode ist ziemlich langsam, da sie den gesamten DOM-Baum analysieren muss alle stimmt mit diesem Selektor überein und füllt ein Array damit.

Der Parameter ['length'] ist nicht erforderlich oder nützlich und der Code wird viel schneller, wenn Sie ihn direkt verwenden document.querySelector(selector) Stattdessen wird das erste Element zurückgegeben, mit dem es übereinstimmt, oder null, wenn es 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 eigentliche Objekt zurück, das zurückgegeben wird.Das ist in Ordnung, wenn es nicht als Variable gespeichert und wiederholt verwendet wird (wodurch die Referenz erhalten bleibt, falls wir sie 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 manchen Fällen kann dies gewü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 Wahr/Falsch erhalten/speichern möchten, verdoppeln Sie es einfach, nicht !!Es funktioniert bei Schuhen, die nicht gebunden sind. 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);

Answer 13

ich habe gefunden if ($(selector).length) {} unzureichend sein.Es wird Ihre App stillschweigend beschädigen, wenn selector ist ein leeres Objekt {}.

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 suche jedoch immer noch nach einer besseren Lösung, da diese etwas schwer ist.

Bearbeiten: WARNUNG! Dies funktioniert im IE nicht, wenn selector ist eine Zeichenfolge.

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

Answer 14

Ist $.contains() was willst du?

jQuery.contains( container, contained )

Der $.contains() Die 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 ein direktes untergeordnetes Element ist oder tiefer verschachtelt ist.Andernfalls wird false zurückgegeben.Es werden nur Elementknoten unterstützt;wenn das zweite Argument ein Text- oder Kommentarknoten ist, $.contains() wird false zurückgeben.

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

Answer 15

Mithilfe der Länge im Java-Skript können Sie überprüfen, ob ein Element vorhanden ist oder nicht.Wenn die Länge größer als Null ist, ist das Element vorhanden, wenn die Länge Null ist, dann 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
}

Answer 16

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

Benutzen Sie die .Länge Eigenschaft der Jquery -Sammlung, die von Ihrem Selektor zurückgegeben wurde:

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

Beachten Sie, dass es nicht immer notwendig ist, zu testen, ob ein Element vorhanden ist.Der folgende Code zeigt das Element an, wenn es existiert, und tun nichts (ohne Fehler), wenn dies nicht der Fall ist:

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

Answer 17

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

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

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

Answer 18

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

Answer 19

Versuchen Sie es mit dem Testen DOM Element

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

Answer 20

Inspiriert von Hiways Antwort Ich habe mir Folgendes ausgedacht:

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

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

Benutzen document.documentElement da das erste Argument die Semantik des erfüllt exists Methode, wenn wir sie ausschließlich anwenden möchten, um die Existenz eines Elements im aktuellen Dokument zu überprüfen.

Unten habe ich einen Vergleichsausschnitt zusammengestellt jQuery.exists() gegen das $(sel)[0] Und $(sel).length Ansätze, die beide zurückkehren truthy Werte für $(4) während $(4).exists() kehrt zurück false.Im Zusammenhang mit auf Existenz prüfen eines Elements im DOM scheint dies das zu sein erwünschtes Ergebnis.

$.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>

Answer 21

Ich verwende dafür einfach gerne Plain-Vanilla-Javascript.

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

Answer 22

Keine Notwendigkeit für jQuery

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

Answer 23

Ich bin über diese Frage gestolpert 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 scheint viel Code zu sein, aber wenn er in CoffeeScript geschrieben ist, ist er recht klein:

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

Answer 24

Ich hatte einen Fall, in dem ich sehen wollte, ob ein Objekt in einem anderen existiert, also habe ich der ersten Antwort etwas hinzugefügt, um nach einem Selektor innerhalb des Selektors 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;
};

Answer 25

Wie wäre es mit:

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

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

Es ist sehr minimalistisch und erspart Ihnen das Umschließen des Selektors $() jedes Mal.

Answer 26

Ich verwende Folgendes:

    $.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/

Answer 27

Hier ist mein Favorit exist Methode in 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 einen Rückruf unterstützt, wenn der Selektor nicht 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
    }
);

Answer 28

$("selector") gibt ein Objekt zurück, das die hat length Eigentum.Wenn der Selektor Elemente findet, werden diese in das Objekt aufgenommen.Wenn Sie also die Länge überprüfen, können Sie sehen, ob Elemente vorhanden sind.In JavaScript 0 == false, also wenn du es nicht bekommst 0 Ihr Code wird ausgeführt.

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

Answer 29

Hier ist das vollständige Beispiel für verschiedene Situationen und eine Möglichkeit, mit dem direkten if-on-jQuery-Selektor zu überprüfen, ob ein Element vorhanden ist, 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

Answer 30

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

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