Esiste una funzione "esiste" per jQuery?

Come posso verificare l'esistenza di un elemento in jQuery?

Il codice attuale che ho è questo:

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

C'è un modo più elegante per affrontare questo? Forse un plugin o una funzione?

In JavaScript, tutto è "verità" o "falsità", e per numeri 0(e NaN) significa falsetutto il resto true. Quindi potresti scrivere:

if ($(selector).length)

Non hai bisogno di quella >0parte.

Sì!

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

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

Questo è in risposta a: Podcast Herding Code con Jeff Atwood

Se hai usato

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

vorresti dire che il concatenamento era possibile quando non lo è.

Questo sarebbe meglio:

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

In alternativa, dalle FAQ :

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

È inoltre possibile utilizzare quanto segue. Se non ci sono valori nella matrice di oggetti jQuery, ottenere il primo elemento nella matrice restituisce un valore indefinito.

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

Puoi usare questo:

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

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

Il modo più veloce e semanticamente autoesplicativo per verificare l'esistenza è in realtà usando plain JavaScript:

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

È un po 'più lungo da scrivere rispetto all'alternativa di lunghezza jQuery, ma viene eseguito più velocemente poiché è un metodo JS nativo.

Ed è meglio dell'alternativa di scrivere la tua jQueryfunzione. Questa alternativa è più lenta, per i motivi dichiarati da @snover. Ma darebbe anche agli altri programmatori l'impressione che la exists()funzione sia inerente a jQuery. JavaScriptsarebbe / dovrebbe essere compreso da altri che modificano il tuo codice, senza aumentare il debito di conoscenza.

NB: Nota la mancanza di un '#' prima del element_id(dato che questo è semplicemente JS, non jQuery).

È possibile salvare alcuni byte scrivendo:

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

Questo funziona perché ogni oggetto jQuery si maschera anche come un array, quindi possiamo usare l'operatore di dereferencing dell'array per ottenere il primo elemento dall'array . Restituisce undefinedse non ci sono articoli nell'indice specificato.

Puoi usare:

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

Un po ' più elegante, forse.

Questo plugin può essere utilizzato in ifun'istruzione simile if ($(ele).exist()) { /* DO WORK */ }o utilizzando un callback.

Collegare

;;(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

È possibile specificare uno o due callback. Il primo si attiverà se l'elemento esiste, il secondo si attiverà se l'elemento non esiste. Tuttavia, se si sceglie di passare solo una funzione, si attiverà solo quando l'elemento esiste. Pertanto, la catena morirà se l'elemento selezionato non esiste. Naturalmente, se esiste, la prima funzione si attiverà e la catena continuerà.

Ricorda che l'uso della variante di callback aiuta a mantenere la catenabilità : l'elemento viene restituito e puoi continuare a concatenare i comandi come con qualsiasi altro metodo jQuery!

Esempio di utilizzo

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

Vedo che la maggior parte delle risposte qui non sono accurate come dovrebbero essere, controllano la lunghezza dell'elemento, in molti casi può essere OK , ma non al 100% , immagino invece se il numero passa alla funzione, quindi prototipo una funzione che controlla tutto condizioni e restituire la risposta come dovrebbe essere:

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

Questo controllerà sia la lunghezza che il tipo, ora puoi verificarlo in questo modo:

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

Non c'è davvero bisogno di jQuery. Con JavaScript semplice è più facile e semanticamente corretto verificare:

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

Se per qualsiasi motivo non desideri inserire un ID nell'elemento, puoi comunque utilizzare qualsiasi altro metodo JavaScript progettato per accedere al DOM.

jQuery è davvero interessante, ma non lasciare che JavaScript puro cada nell'oblio ...

Puoi usare questo:

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

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

Il motivo per cui tutte le risposte precedenti richiedono il .lengthparametro è che usano principalmente il $()selettore di jquery che ha querySelectorAll dietro le tende (o lo usano direttamente). Questo metodo è piuttosto lento perché deve analizzare l'intero albero DOM cercando tutte le corrispondenze a quel selettore e popolando un array con esse.

Il parametro ['length'] non è necessario o utile e il codice sarà molto più veloce se document.querySelector(selector)invece lo usi direttamente , perché restituisce il primo elemento corrispondente o nullo se non trovato.

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

Tuttavia questo metodo ci lascia con l'oggetto reale che viene restituito; che va bene se non verrà salvato come variabile e usato ripetutamente (mantenendo così il riferimento in giro se lo dimentichiamo).

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 alcuni casi questo può essere desiderato. Può essere usato in un ciclo for in questo modo:

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

Se in realtà non hai bisogno dell'elemento e vuoi ottenere / memorizzare solo un vero / falso, basta raddoppiarlo !! Funziona con le scarpe sciolte, quindi perché fare un nodo qui?

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

È $.contains()quello che vuoi?

jQuery.contains( container, contained )

Il $.contains()metodo restituisce true se l'elemento DOM fornito dal secondo argomento è un discendente dell'elemento DOM fornito dal primo argomento, sia esso figlio diretto o nidificato in modo più approfondito. Altrimenti, restituisce false. Sono supportati solo i nodi elemento; se il secondo argomento è un nodo di testo o commento, $.contains()restituirà false.

Nota : il primo argomento deve essere un elemento DOM, non un oggetto jQuery o un semplice oggetto JavaScript.

Ho trovato if ($(selector).length) {}insufficiente. Si romperà silenziosamente la tua app quando selectorè un oggetto vuoto {}.

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

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

Il mio unico suggerimento è di eseguire un controllo aggiuntivo per {}.

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

Sto ancora cercando una soluzione migliore, dato che questa è un po 'pesante.

Modifica: ATTENZIONE! Questo non funziona in IE quando selectorè una stringa.

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

Puoi controllare che l'elemento sia presente o che non usi la lunghezza nello script java. Se la lunghezza è maggiore di zero, l'elemento è presente se la lunghezza è zero, allora l'elemento non è presente

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

Il controllo dell'esistenza di un elemento è documentato ordinatamente nel sito Web ufficiale di jQuery stesso!

Utilizzare la proprietà .length della raccolta jQuery restituita dal selettore:

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

Si noti che non è sempre necessario verificare l'esistenza di un elemento. Il codice seguente mostrerà l'elemento se esiste e non farà nulla (senza errori) in caso contrario:

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

questo è molto simile a tutte le risposte, ma perché non usare l' !operatore due volte in modo da ottenere un valore booleano:

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

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

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

Prova a testare l' DOMelemento

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

Ispirato dalla risposta di Hiway, ho pensato a quanto segue:

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

jQuery.contains accetta due elementi DOM e controlla se il primo contiene il secondo.

L'uso document.documentElementcome primo argomento soddisfa la semantica del existsmetodo quando vogliamo applicarlo esclusivamente per verificare l'esistenza di un elemento nel documento corrente.

Di seguito, ho messo insieme uno snippet che si confronta jQuery.exists()con gli approcci $(sel)[0]e $(sel).lengthche entrambi restituiscono truthyvalori per $(4)mentre $(4).exists()restituisce false. Nel contesto del controllo dell'esistenza di un elemento nel DOM, questo sembra essere il risultato desiderato .

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

Non è necessario per jQuery (soluzione di base)

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

Opzione molto più performante di seguito (nota la mancanza di un punto prima di una classe).

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

querySelector utilizza un motore di corrispondenza adeguato come $ () (sfrigolare) in jQuery e utilizza più potenza di calcolo, ma nel 99% dei casi andrà benissimo. La seconda opzione è più esplicita e dice al codice esattamente cosa fare. È molto più veloce secondo jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25

Mi piace solo usare javascript semplice alla vaniglia per fare questo.

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

Mi sono imbattuto in questa domanda e vorrei condividere uno snippet di codice che attualmente uso:

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

E ora posso scrivere codice come questo -

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

Potrebbe sembrare molto codice, ma quando è scritto in CoffeeScript è piuttosto piccolo:

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

Ho avuto un caso in cui volevo vedere se esiste un oggetto all'interno di un altro, quindi ho aggiunto qualcosa alla prima risposta per verificare la presenza di un selettore all'interno del selettore.

// 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;
};

Che ne dite di:

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

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

È molto minimale e ti evita di dover racchiudere il selettore $()ogni volta.

Sto usando questo:

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

Esegui la catena solo se esiste un elemento jQuery - http://jsfiddle.net/andres_314/vbNM3/2/

Ecco il mio existmetodo preferito in jQuery

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

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

e un'altra versione che supporta il callback quando il selettore non esiste

$.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);
            }
        }
    });
};

Esempio:

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

$("selector") restituisce un oggetto che ha la lengthproprietà. Se il selettore trova degli elementi, verranno inclusi nell'oggetto. Quindi, se controlli la sua lunghezza, puoi vedere se esistono elementi. In JavaScript 0 == false, quindi se non ottieni il 0tuo codice verrà eseguito.

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

Ecco l'esempio completo di diverse situazioni e modi per verificare se esiste un elemento usando direct if on il selettore jQuery può o meno funzionare perché restituisce array o elementi.

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

SOLUZIONE FINALE

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

Non devi controllare se è più grande di 0come $(selector).length > 0, $(selector).lengthè abbastanza ed un modo elegante per verificare l'esistenza di elementi. Non penso che valga la pena scrivere una funzione solo per questo, se vuoi fare altre cose extra, sì.

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