Pregunta ¿Hay una función "existe" para jQuery?


¿Cómo puedo verificar la existencia de un elemento en jQuery?

El código actual que tengo es este:

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

¿Hay una forma más elegante de abordar esto? Tal vez un complemento o una función?


2322
2017-08-27 19:49


origen


Respuestas:


En JavaScript, todo es "verídico" o "falso", y para los números 0 (y NaN) significa false, todo lo demas true. Entonces podrías escribir:

if ($(selector).length)

No necesitas eso >0 parte.


2062
2018-02-25 19:16



¡Sí!

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

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

Esto es en respuesta a: El podcast de Herding Code con Jeff Atwood


1247
2017-08-27 19:50



Si usaste

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

implicaría que el encadenamiento era posible cuando no lo es.

Esto sería mejor:

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

Alternativamente, de las preguntas frecuentes:

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

También puedes usar lo siguiente. Si no hay valores en la matriz de objetos jQuery, obtener el primer elemento de la matriz devolvería indefinido.

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

323
2018-01-14 19:46



Puedes usar esto:

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

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

98
2018-04-03 12:17



La forma más rápida y semánticamente autoexplicativa de verificar la existencia es usar JavaScript plano:

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

Es un poco más largo de escribir que la alternativa de jQuery length, pero se ejecuta más rápido ya que es un método JS nativo.

Y es mejor que la alternativa de escribir su propia función jQuery. Esa alternativa es más lenta, por las razones que declaró @snover. Pero también le daría a otros programadores la impresión de que la función exists () es algo inherente a jQuery. JavaScript / debería ser entendido por otros editando su código, sin aumentar la deuda de conocimiento.

NB: Observe la falta de un '#' antes del elemento_id (ya que esto es simple JS, no jQuery).


73
2018-01-11 12:27



Puede guardar algunos bytes escribiendo:

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

Esto funciona porque cada objeto jQuery también se enmascara como una matriz, por lo que podemos usar el operador de desreferenciación de la matriz para obtener el primer elemento del formación. Vuelve undefined si no hay ningún elemento en el índice especificado.


53
2018-01-18 09:04



Puedes usar:

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

UN pequeño más elegante, tal vez.


50
2017-09-17 17:53



Este complemento se puede usar en un if declaración como if ($(ele).exist()) { /* DO WORK */ } o usando una devolución de llamada.

Enchufar

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

Puede especificar una o dos devoluciones de llamada. El primero disparará si el elemento existe, el segundo disparará si el elemento no existe. Sin embargo, si elige pasar solo una función, solo se activará cuando el elemento exista. Por lo tanto, la cadena morirá si el elemento seleccionado no no existe. Por supuesto, si existe, la primera función se disparará y la cadena continuará.

Tenga en cuenta que al usar variante de devolución de llamada ayuda a mantener la chainable - ¡Se devuelve el elemento y puede continuar encadenando comandos como con cualquier otro método de jQuery!

Ejemplos de usos

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



No hay necesidad de jQuery realmente. Con JavaScript simple es más fácil y semánticamente correcto verificar:

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

Si por algún motivo no desea poner una identificación en el elemento, aún puede usar cualquier otro método JavaScript diseñado para acceder al DOM.

jQuery es realmente genial, pero no dejes que el JavaScript puro caiga en el olvido ...


43
2018-05-20 09:21