Domanda Esiste una funzione "esiste" per jQuery?


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

Il codice corrente che ho è questo:

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

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


2321
2017-08-27 19:49


origine


risposte:


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

if ($(selector).length)

Non ne hai bisogno >0 parte.


2060
2018-02-25 19:16



Sì!

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

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

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


1247
2017-08-27 19:50



Se hai usato

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

implicherebbe che il concatenamento fosse 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 */ }

Puoi anche usare quanto segue. Se non ci sono valori nell'array di oggetti jQuery, ottenere il primo elemento nell'array restituirà undefined.

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

323
2018-01-14 19:46



Puoi usare questo:

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

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

98
2018-04-03 12:17



In realtà, il modo più rapido e semantico di autoispermazione per verificare l'esistenza è utilizzando semplicemente 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é si tratta di un metodo JS nativo.

Ed è meglio dell'alternativa di scrivere la tua funzione jQuery. Questa alternativa è più lenta, per le ragioni indicate da @snover. Ma darebbe anche agli altri programmatori l'impressione che la funzione exists () sia qualcosa di inerente a jQuery. JavaScript dovrebbe / dovrebbe essere compreso dagli altri che modificano il tuo codice, senza un maggiore debito di conoscenza.

NB: Si noti la mancanza di un "#" prima di element_id (poiché questo è semplice JS, non jQuery).


73
2018-01-11 12:27



Puoi salvare alcuni byte scrivendo:

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

Questo funziona perché ogni oggetto jQuery si maschera anche come array, quindi possiamo usare l'operatore di dereferenziazione dell'array per ottenere il primo elemento dal schieramento. Ritorna undefined se non ci sono articoli nell'indice specificato


53
2018-01-18 09:04



Puoi usare:

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

UN piccolo più elegante, forse.


50
2017-09-17 17:53



Questo plugin può essere utilizzato in un if dichiarazione come if ($(ele).exist()) { /* DO WORK */ } o utilizzando una richiamata.

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 sparerà se l'elemento esiste, il secondo sparerà se l'elemento lo fa non esistere. Tuttavia, se si sceglie di passare solo una funzione, verrà attivata solo quando l'elemento esiste. Pertanto, la catena morirà se l'elemento selezionato lo fa non esistere. Ovviamente, se esiste, la prima funzione sparerà e la catena continuerà.

Tieni presente che usando il la variante di callback aiuta a mantenere la chainability - l'elemento viene restituito e puoi continuare a concatenare i comandi come con qualsiasi altro metodo jQuery!

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

48
2017-11-14 14:20



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 si desidera inserire un id per l'elemento, è comunque possibile utilizzare qualsiasi altro metodo JavaScript progettato per accedere al DOM.

jQuery è davvero bello, ma non lasciare che il puro JavaScript cada nel dimenticatoio ...


43
2018-05-20 09:21