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

2778

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?

Jake McGraw
quelle

Antworten:

2489

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.

Tim Büthe
quelle
52
@ abhirathore2006 Wenn Sie einen ID-Selektor verwenden und das Element nicht vorhanden ist, ist die Länge 0 und löst keine Ausnahmen aus.
Robert
14
Interessanterweise NaN != false.
Robert
35
@ Robert und [] + []= ""... ahh ich liebe Javascript
James
9
@ James Das liegt daran [].toString() === [].join(',') === ""und "" === "".
Ismael Miguel
5
@ Robert undtypeof NaN == 'number'
Oriadam
1356

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

Jake McGraw
quelle
254
Ich schreibe nur: if ($ (Selektor) .length) {...} ohne die '> 0'
vsync
369
Ihr $.fn.existsBeispiel ist das Ersetzen einer Eigenschaftssuche (billig!) Durch zwei Funktionsaufrufe, die viel teurer sind - und einer dieser Funktionsaufrufe erstellt ein bereits vorhandenes jQuery-Objekt neu, was einfach albern ist.
C Snover
212
@redsquare: Die Lesbarkeit von Code ist der beste Grund, um diese Art von Funktion in jQuery hinzuzufügen. Wenn etwas aufgerufen wird, wird es .existssauber gelesen, während es .lengthals etwas semantisch anderes gelesen wird, selbst wenn die Semantik mit einem identischen Ergebnis übereinstimmt.
Ben Zotto
48
@quixoto, sorry, aber .length ist ein Standard in vielen Sprachen, der nicht umbrochen werden muss. Wie interpretieren Sie sonst die Länge?
Redsquare
144
Meiner Meinung nach ist es mindestens eine logische Indirektion vom Konzept "einer Listenlänge, die größer als Null ist" zum Konzept "der Elemente, für die ich einen Selektor geschrieben habe". Ja, technisch gesehen sind sie dasselbe, aber die konzeptionelle Abstraktion befindet sich auf einer anderen Ebene. Dies führt dazu, dass einige Leute einen expliziteren Indikator bevorzugen, selbst bei einigen Leistungskosten.
Ben Zotto
377

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 */ }
Jon Erickson
quelle
11
Die erste Methode liest sich besser. $ ("a"). exist () liest als "wenn <a> Elemente existieren". $ .exists ("a") lautet "wenn <a> Elemente vorhanden sind".
Strager
16
true, aber auch hier implizieren Sie, dass eine Verkettung möglich ist, und wenn ich versuchen würde, etwas wie $ (Selektor) .exists (). css ("Farbe", "Rot") zu tun, würde es nicht funktionieren und dann wäre ich = * (
Jon Erickson
19
Es gibt bereits Methoden, die nicht verkettbar sind, wie z. B. attr- und Datenfunktionen. Ich verstehe Ihren Standpunkt jedoch und für das, was es wert ist, teste ich sowieso nur auf Länge> 0.
Matthew Crumley
39
Warum um alles in der Welt müssten Sie das verketten? $(".missing").css("color", "red")macht schon das Richtige… (dh nichts)
Ben Blank
15
Die Verkettung ist komplett - es gibt viele jQuery- $.fnMethoden, die etwas anderes als ein neues jQuery-Objekt zurückgeben und daher nicht verketten.
Alnitak
136

Sie können dies verwenden:

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

// if element does not exist
if(!$('selector').length){ /* do something */ }
Yanni
quelle
134
Haben Sie nicht gesehen, dass Tim Büthe diese Antwort bereits 2 Jahre vor Ihnen gegeben hat?
Th4t Guy
101
Pfft, Tim hat nie gezeigt, wie man testet, ob das Element nicht existiert.
Jeremy W
1
Du meinst das Leben "sonst"? Mein Q lautet: äh, es muss existieren oder der Selektor stimmt nicht überein. Die Länge ist überflüssig.
RichieHH
26
Diese Antwort und Kommentare fassen zusammen, wie Stackoverflow funktioniert
aswzen
101

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

Magne
quelle
56
Ganz und gar nicht dasselbe. JQuery-Selektoren können beispielsweise für jede CSS-Regel verwendet werden $('#foo a.special'). Und es kann mehr als ein Element zurückgeben. getElementByIdIch kann nicht anfangen, mich dem anzunähern.
Kikito
7
Sie haben insofern Recht, als es nicht so allgemein anwendbar ist wie Selektoren. Im häufigsten Fall funktioniert dies jedoch recht gut (Überprüfung, ob ein einzelnes Element vorhanden ist). Die Argumente der Selbsterklärung und Geschwindigkeit stehen noch.
Magne
29
@Noz if(document.querySelector("#foo a.special"))würde funktionieren. Keine jQuery erforderlich.
Blue Skies
34
Das Argument der Geschwindigkeit in JS-Engines ist nur für Leute tot, die ohne jQuery nicht funktionieren können, da es ein Argument ist, das sie nicht gewinnen können.
Blue Skies
22
Erinnern Sie sich an die guten alten Zeiten, als document.getElementById alles war, was wir hatten? Und ich habe das Dokument immer vergessen. und konnte nicht herausfinden, warum es nicht funktionierte. Und ich habe es immer falsch geschrieben und das Charaktergehäuse falsch verstanden.
JustJohn
73

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.

Salman A.
quelle
1
Ich bin hierher gekommen, um genau diese Antwort zu posten ... obligatorische Geige: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak
3
@JasonWilczak Möchtest du kommentieren, warum nicht stattdessen: .eq [0] oder .first (), um auf ein erstes Element zu verweisen, das gefunden wurde, anstatt auf Typ Casting?
Jean Paul AKA el_vete
5
Nein, jQuery.first()oder jQuery.eq(0)beide geben Objekte zurück, Objekte sind wahr, auch wenn sie leer sind. Dieses Beispiel sollte veranschaulichen, warum diese Funktionen nicht unverändert verwendet werden können:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A
1
Richtig. .eq(0)Gibt nur ein anderes jQuery-Objekt zurück, das auf Länge 1 oder 0 abgeschnitten wurde. Dies .first()ist nur eine bequeme Methode für .eq(0). Aber .get(0)gibt das erste DOM - Element oder undefinedund ist das gleiche wie [0]. Das erste DOM-Element in einem jQuery-Objekt wird in der regulären Objekteigenschaft mit dem Namen gespeichert '0'. Das ist ein einfacher Zugang zu Immobilien. Das einzige Typ-Casting ergibt sich aus der impliziten Konvertierung der Zahl 0in die Zeichenfolge '0'. Wenn also Typ Casting ein Problem ist, können Sie $.find(selector)['0']stattdessen verwenden.
Robert
66

Sie können verwenden:

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

Ein wenig elegante, vielleicht.

Devon
quelle
38
Das ist zu viel für so eine einfache Sache. siehe Tim Büthe Antwort
vsync
Dies ist die richtige Antwort. Die 'Länge'-Methode hat das Problem, dass sie mit einer beliebigen Zahl falsch positiv ist, zum Beispiel: $ (666) .length // gibt 1 zurück, aber es ist kein gültiger Selektor
Earnaz
Dies ist für sehr einfache Aufgaben extrem teuer. Schauen Sie sich einfach die jquery-Implementierung an, wenn .is (), und Sie werden sehen, wie viel Code verarbeitet werden muss, um Ihnen diese einfache Frage zu beantworten. Es ist auch nicht klar, was Sie genau tun möchten, daher ist es dieselbe oder weniger elegant als die betreffende Lösung.
micropro.cz
1
@earnaz toller Punkt, schöner Fang. Ich sehe jedoch nicht, wo sich das wirklich lohnt. Entwickler, die Elemente identifizieren, 666haben wahrscheinlich viele andere Gründe, warum ihr Code kaputt ist. Obwohl es sich um einen ungültigen Selektor handelt, ist $ (666) .length ein gültiges Javascript : Es wird als wahr ausgewertet und sollte daher die Bedingung erfüllen.
Todd
@earnaz, um diesen speziellen Fall zu vermeiden, $.find(666).lengthfunktioniert.
Emile Bergeron
66

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    */
    }
})
SpYk3HH
quelle
1
Sollte der Has ItemsRückruf in der Rückrufversion das Objekt nicht tatsächlich als Argument übergeben?
Chris Marisic
62

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
Alireza
quelle
55

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

Amypellegrini
quelle
5
Ich weiß: Es beantwortet nicht direkt die ursprüngliche Frage (die nach einer Abfragefunktion fragt), aber in diesem Fall wäre die Antwort "Nein" oder "keine semantisch korrekte Lösung".
Amypellegrini
Was ist, wenn Sie einen übergeordneten Selektor benötigen :has()?
24онстант .н Ван
54

Sie könnten dies verwenden:

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

if($(selector).exists()){/*do something*/}
Amitābha
quelle
43

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);
Technosaurus
quelle
40

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.

hi Weg
quelle
3
Dies akzeptiert keinen Selektor, was bedeutet, dass er ihn auswählen müsste, was bedeutet, dass er nur das Ergebnis seiner Auswahl überprüfen könnte.
39

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
Oleg
quelle
12
Wie oft rufen Sie $()mit einem leeren Objekt als Argument an?
nnnnnn
@nnnnnn Eigentlich nie (ich benutze jQuery nicht mehr). Aber ich glaube, vor 3 Jahren hatte ich den Fall, eine API verfügbar zu machen, die einen Selektor benötigt und die Anzahl der Elemente für diesen Selektor zurückgibt. Wenn ein anderer Entwickler ein leeres Objekt übergeben würde, würde er fälschlicherweise mit 1 antworten.
Oleg
3
Warum in aller Welt würden Sie ein leeres Objekt passieren {}zu $()?
Alle Arbeiter sind essentiell
7
@cpburnz warum fragst du mich? Ich war nur ein API-Anbieter ... Leute geben alle möglichen dummen Dinge an APIs weiter.
Oleg
4
Gerade bemerkt, wurde der von @FagnerBrack referenzierte JQuery-Issue-Thread kurz nach seinem Kommentar aktualisiert. es sieht so aus, als würde es doch nicht verschwinden.
Joseph Gabriel
38

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
}
Anurag Deokar
quelle
4
Sie müssen nicht überprüfen, ob die Wetterlänge größer als 0 ist, wenn ($ ('# elementid'). Length) {} ausreicht.
Pranav Labhe
13
Hast du die Frage tatsächlich gelesen? Es ist genau die gleiche Methode, die OP verwendet.
A1rPun
34

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();
Tilak Maddy
quelle
31

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?...
}
Santiago Hernández
quelle
2
Weil Boolean(x)kann manchmal effizienter sein.
28
$(selector).length && //Do something
SJG
quelle
19
Ich hasse diese cleveren Methoden, um zu vermeiden, dass ein Ort verwendet wird, an ifdem ifdie Lesbarkeit auf Kosten von 2 Bytes verbessert wird.
Emile Bergeron
Außerdem erledigen Minifahrer all dies &&für Sie.
27

Versuchen Sie, auf DOMElemente zu testen

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

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 .

Oliver
quelle
26

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

Pawel
quelle
25

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

function isExists(selector){
  return document.querySelectorAll(selector).length>0;
}
Sanu Uthaiah Bollera
quelle
23

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
Eternal1
quelle
9
Ich finde den ursprünglichen Ansatz von OP nicht nur viel minimaler, sondern auch eleganter. Es scheint übertrieben, so viel Code zu schreiben, wenn die OP-Methode kürzer ist und keine Rückrufe beinhaltet.
Lev
Für einfache Fälle - Sie haben Recht. Aber für komplexere Situationen mit viel Code in beiden Fällen denke ich, dass mein Ansatz besser ist.
Eternal1
4
In welcher komplexen Situation wäre dieser Ansatz besser als eine einfache if / else-Aussage?
Jarvl
19

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;
};
jcreamer898
quelle
18

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 .

G STAR
quelle
3
Dies lautet "wenn es etwas gibt" anstelle von "wenn etwas existiert", was so if($("#thing").exists(){}lautet. Es ist auch nicht der jQuery-Weg.
1j01
15

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/

andy_314
quelle
14

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
    }
);
ducdhm
quelle
14

$("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
} 
Kamuran Sönecek
quelle
5
"gib ein Array" - Nein, das tut es nicht. Sie erhalten ein jQuery-Objekt (das einige Eigenschaften mit einem Array teilt). Ihre Antwort ist im Wesentlichen dieselbe wie die von Tim Büthe aus dem Jahr 2009.
Quentin
11

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
abhirathore2006
quelle
Sie können $ ("# xysyxxs") in Ihrem Debugger ausprobieren. Sie werden feststellen, dass jquery nicht null oder undefiniert zurückgibt. Die endgültige Lösung würde also nicht funktionieren
Béranger
11

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
}
Andrei Todorut
quelle