¿Existe una función "existe" para jQuery?


2778

¿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 manera más elegante de abordar esto? ¿Quizás un complemento o una función?

Respuestas:


2490

En JavaScript, todo es 'verdadero' o 'falso', y para los números 0(y NaN) significa false, todo lo demás true. Entonces podrías escribir:

if ($(selector).length)

No necesitas esa >0parte.


52
@ abhirathore2006 Si usa un selector de id y el elemento no existe, la longitud es 0 y no arroja excepciones.
Robert

14
Curiosamente NaN != false.
Robert

35
@Robert y [] + []= ""... ahh me encanta javascript
James

99
@ James Eso es porque [].toString() === [].join(',') === ""y "" === "".
Ismael Miguel

55
@Robert ytypeof NaN == 'number'
oriadam

1356

¡Si!

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

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

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


254
Solo escribo: if ($ (selector) .length) {...} sin el '> 0'
vsync

369
Su $.fn.existsejemplo es reemplazar una búsqueda de propiedad (¡barata!) Con dos llamadas a funciones, que son mucho más caras, y una de esas llamadas a funciones recrea un objeto jQuery que ya tiene, lo cual es una tontería.
C Snover

212
@redsquare: la legibilidad del código es la mejor razón para agregar este tipo de función en jQuery. Tener algo llamado se .existslee limpiamente, mientras que se .lengthlee como algo semánticamente diferente, incluso si la semántica coincide con un resultado idéntico.
Ben Zotto

48
@quixoto, lo siento, pero .length es un estándar en muchos idiomas que no necesita ajuste. ¿De qué otra manera interpretas .length?
Redsquare

144
En mi opinión, es al menos una indirección lógica del concepto de "una longitud de lista que es mayor que cero" al concepto de "los elementos para los que escribí un selector para existir". Sí, técnicamente son lo mismo, pero la abstracción conceptual está en un nivel diferente. Esto hace que algunas personas prefieran un indicador más explícito, incluso a un costo de rendimiento.
Ben Zotto

377

Si usaste

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

implicaría que el encadenamiento fue 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 volverá indefinido.

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

11
El primer método se lee mejor. $ ("a"). exist () se lee como "si existen elementos <a>". $ .exists ("a") se lee como "si existen <a> elementos".
extraño

16
cierto, pero de nuevo, estás insinuando que el encadenamiento es posible y si intentara hacer algo como $ (selector) .exists (). css ("color", "red") no funcionaría y entonces sería = * (
Jon Erickson el

19
Ya hay métodos que no se pueden encadenar, como attr y funciones de datos. Sin embargo, veo su punto y, para lo que vale, solo pruebo la longitud> 0 de todos modos.
Matthew Crumley el

39
¿Por qué demonios necesitarías encadenar esto? $(".missing").css("color", "red")ya hace lo correcto ... (es decir, nada)
Ben Blank

15
La cuestión del encadenamiento es completa: hay muchos$.fn métodos jQuery que devuelven algo más que un nuevo objeto jQuery y, por lo tanto, no se encadenan.
Alnitak

136

Puedes usar esto:

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

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

134
¿No viste que Tim Büthe ya había dado esta respuesta 2 años antes que tú?
Th4t Guy

101
Pfft, Tim nunca mostró cómo probar si el elemento no existe.
Jeremy W

1
¿Te refieres a la vida "más"? Mi Q es esta: err, debe existir o el selector no coincide. La longitud es superflua.
RichieHH

26
esta respuesta y comentarios
resumen

101

La forma más rápida y semánticamente autoexplicativa de verificar la existencia es en realidad usando simple JavaScript:

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

Es un poco más largo para escribir que la alternativa de longitud jQuery, 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 jQueryfunción. Esa alternativa es más lenta, por las razones que declaró @snover. Pero también les daría a otros programadores la impresión de que la exists()función es algo inherente a jQuery. JavaScriptSería / debería ser entendido por otros editando su código, sin una mayor deuda de conocimiento.

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


56
Totalmente no es lo mismo. Los selectores JQuery se pueden usar para cualquier regla CSS, por ejemplo $('#foo a.special'). Y puede devolver más de un elemento. getElementByIdNo puedo comenzar a abordar eso.
kikito

77
Tiene razón en que no es tan ampliamente aplicable como los selectores. Sin embargo, hace el trabajo bastante bien en el caso más común (verificando si existe un solo elemento). Los argumentos de la autoexplicación y la velocidad siguen en pie.
Magne

29
@Noz if(document.querySelector("#foo a.special"))funcionaría. No se necesita jQuery.
Blue Skies

34
El argumento de la velocidad en los motores JS solo está muerto en la mente de las personas que no pueden funcionar sin jQuery, ya que es un argumento que no pueden ganar.
Blue Skies

22
¿Recuerdas los viejos tiempos cuando document.getElementById era todo lo que teníamos? Y siempre olvidé el documento. y no podía entender por qué no funcionó. Y siempre lo deletreé mal y me equivoqué de carcasa.
JustJohn

73

Puede guardar algunos bytes escribiendo:

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

Esto funciona porque cada objeto jQuery también se disfraza como una matriz, por lo que podemos usar el operador de referencia de matriz para obtener el primer elemento de la matriz . Regresa undefinedsi no hay ningún elemento en el índice especificado.


1
Vine aquí para publicar esta respuesta exacta ... violín obligatorio: jsfiddle.net/jasonwilczak/ekjj80gy/2
JasonWilczak

3
@JasonWilczak Tenga cuidado de comentar por qué no en su lugar: .eq [0] o .first () para referirse a un primer elemento encontrado en lugar de la conversión de tipo
Jean Paul AKA el_vete

55
No, jQuery.first()o jQuery.eq(0)ambos devuelven objetos, los objetos son verdaderos incluso si están vacíos. Este ejemplo debería ilustrar por qué estas funciones no pueden usarse tal cual:if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists")
Salman A

1
Correcto. .eq(0)devuelve solo otro objeto jQuery truncado a longitud 1 o 0. .first()es solo un método conveniente para .eq(0). Pero .get(0)devuelve el primer elemento DOM o undefinedy es lo mismo que [0]. El primer elemento DOM en un objeto jQuery se almacena en la propiedad del objeto regular con el nombre '0'. Eso es un simple acceso a la propiedad. El único tipo de conversión proviene de la conversión implícita del número 0a la cadena '0'. Así que si la conversión de tipos es un problema que podría utilizar $.find(selector)['0']en su lugar.
Robert

66

Puedes usar:

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

Un poco más elegante, tal vez.


38
Esto es demasiado para una cosa tan simple. ver la respuesta de Tim Büthe
vsync el

Esta es la respuesta correcta. El método 'length' tiene el problema de que da falso positivo con cualquier número, por ejemplo: $ (666) .length // devuelve 1, pero no es un selector válido
Earnaz

Esto es extremadamente costoso para tareas muy simples. Simplemente mire la implementación de jquery si .is () y verá cuánto código necesita procesar para responder a esta simple pregunta. Además, no es obvio qué es lo que quiere hacer exactamente, por lo que es la misma solución, o quizás menos elegante, en cuestión.
micropro.cz

1
@earnaz gran punto, buena captura. Sin embargo, no veo dónde es realmente una preocupación que vale la pena. Los desarrolladores que identifican elementos 666probablemente tienen muchas otras razones por las que su código está roto. Si bien es un selector no válido, $ (666) .length es javascript válido : se evalúa como verdadero y, por lo tanto, debe cumplir la condición.
Todd

@earnaz para evitar ese caso específico, $.find(666).lengthfunciona.
Emile Bergeron

66

Este complemento se puede usar en una ifdeclaració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 se disparará si el elemento existe, el segundo se disparará si el elemento no existe. Sin embargo, si elige pasar solo una función, solo se activará cuando exista el elemento. Por lo tanto, la cadena morirá si el elemento seleccionado no existe. Por supuesto, si existe, la primera función se activará y la cadena continuará.

Tenga en cuenta que el uso de la variante de devolución de llamada ayuda a mantener la capacidad de encadenamiento : el elemento se devuelve y puede continuar encadenando comandos como con cualquier otro método jQuery.

Usos de ejemplo

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

1
En la versión de devolución de llamada, ¿no debería pasar la Has Itemsdevolución de llamada en el objeto como argumento?
Chris Marisic

62

Veo que la mayoría de las respuestas aquí no son precisas como deberían ser, verifican la longitud del elemento, puede estar bien en muchos casos, pero no al 100% , imagínense si el número pasa a la función, así que prototipo de una función que verifica todo condiciones y devolver la respuesta como debería ser:

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

Esto verificará tanto la longitud como el tipo. Ahora puede verificarlo de esta manera:

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

55

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 alguna razón no desea poner una identificación al elemento, aún puede usar cualquier otro método de JavaScript diseñado para acceder al DOM.

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


55
Lo sé: no responde directamente a la pregunta original (que pide una función jquery), pero en ese caso la respuesta sería "No" o "no es una solución semánticamente correcta".
amypellegrini

¿Qué pasa si necesita un selector de padres :has()?
Константин Ван

54

Podrías usar esto:

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

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

43

La razón por la cual todas las respuestas anteriores requieren el .lengthparámetro es que están usando principalmente el $()selector de jquery que tiene querySelectorAll detrás de las cortinas (o lo están usando directamente). Este método es bastante lento porque necesita analizar todo el árbol DOM buscando todas las coincidencias con ese selector y rellenando una matriz con ellos.

El parámetro ['length'] no es necesario o útil y el código será mucho más rápido si lo usa directamente document.querySelector(selector), porque devuelve el primer elemento que coincide o es nulo si no se encuentra.

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

Sin embargo, este método nos deja con el objeto real que se devuelve; lo cual está bien si no se guardará como variable y se usará repetidamente (manteniendo así la referencia si la olvidamos).

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

En algunos casos esto puede desearse. Se puede usar en un bucle for como este:

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

Si realmente no necesita el elemento y desea obtener / almacenar solo un verdadero / falso, ¡simplemente no lo duplique! Funciona para zapatos que se desatan, así que ¿por qué anudar aquí?

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

40

Es $.contains()lo que quieres

jQuery.contains( container, contained )

El $.contains()método devuelve verdadero si el elemento DOM proporcionado por el segundo argumento es un descendiente del elemento DOM proporcionado por el primer argumento, ya sea un elemento secundario directo o anidado más profundamente. De lo contrario, devuelve falso. Solo se admiten nodos de elementos; si el segundo argumento es un nodo de texto o comentario, $.contains()devolverá falso.

Nota : El primer argumento debe ser un elemento DOM, no un objeto jQuery o un objeto JavaScript simple.


3
Esto no acepta un selector, lo que significa que tendría que seleccionarlo, lo que significa que podría verificar el resultado de su selección.

39

He encontrado if ($(selector).length) {}que es insuficiente. Silenciosamente romperá tu aplicación cuando selectorsea ​​un objeto vacío {}.

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

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

Mi única sugerencia es realizar una verificación adicional para {}.

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

Sin embargo, todavía estoy buscando una solución mejor, ya que esta es un poco pesada.

Editar: ¡ADVERTENCIA! Esto no funciona en IE cuando selectores una cadena.

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

12
¿Con qué frecuencia te encuentras llamando $()con un objeto vacío como argumento?
nnnnnn

@nnnnnn En realidad nunca (ya no uso jQuery). Pero supongo que hace 3 años tuve el caso de exponer una API que tomaría un selector y devolvería la cantidad de elementos para ese selector. Si otro desarrollador pasara un objeto vacío, respondería incorrectamente con 1.
Oleg

3
¿Por qué en la tierra que se pasa un objeto vacío {}a $()?
Todos los trabajadores son esenciales

77
@cpburnz ¿por qué me preguntas? Yo solo era un proveedor de API ... La gente pasa todo tipo de estupideces a las API.
Oleg

44
Acabo de notar que el hilo del problema jquery al que @FagnerBrack hizo referencia se actualizó poco después de su comentario; parece que no va a desaparecer después de todo.
Joseph Gabriel

38

Puede verificar si el elemento está presente o no usa la longitud en el script java. Si la longitud es mayor que cero, entonces el elemento está presente si la longitud es cero, entonces el elemento no está 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
}

44
No necesita verificar que la longitud del clima sea mayor que 0, si ($ ('# elementid'). Length) {} será suficiente.
Pranav Labhe

13
¿Has leído realmente la pregunta? Es exactamente el mismo método que utiliza OP.
A1rPun

34

¡La comprobación de la existencia de un elemento se documenta perfectamente en el sitio web oficial de jQuery!

Utilice la propiedad .length de la colección jQuery devuelta por su selector:

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

Tenga en cuenta que no siempre es necesario probar si existe un elemento. El siguiente código mostrará el elemento si existe y no hará nada (sin errores) si no existe:

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

31

Esto es muy similar a todas las respuestas, pero ¿por qué no usar el !operador dos veces para que pueda obtener un valor booleano?

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

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

2
Porque a vecesBoolean(x) puede ser más eficiente.

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

19
Odio estas formas inteligentes de evitar el uso de un ifdonde ifmejoraría la legibilidad a un costo de 2 bytes.
Emile Bergeron

Además, los minificadores harán todo esto &&por usted.


27

Inspirado por la respuesta de Hiway, se me ocurrió lo siguiente:

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

jQuery.contains toma dos elementos DOM y comprueba si el primero contiene el segundo.

El uso document.documentElementcomo primer argumento cumple con la semántica del existsmétodo cuando queremos aplicarlo únicamente para verificar la existencia de un elemento en el documento actual.

A continuación, he juntado un fragmento que se compara jQuery.exists()contra el $(sel)[0]y $(sel).lengthenfoques que ambos vuelven truthyvalores para $(4)mientras que $(4).exists()los retornos false. En el contexto de verificar la existencia de un elemento en el DOM, este parece ser el resultado deseado .


26

No necesita jQuery (solución básica)

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

Opción mucho más eficaz a continuación (observe la falta de un punto antes de una clase).

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

querySelector usa un motor de coincidencia adecuado como $ () (sizzle) en jQuery y usa más potencia informática, pero en el 99% de los casos funcionará bien. La segunda opción es más explícita y le dice al código exactamente qué hacer. Es mucho más rápido según jsperf https://jsperf.com/getelementsbyclassname-vs-queryselectorall/25


25

Solo me gusta usar JavaScript simple para hacer esto.

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

23

Me topé con esta pregunta y me gustaría compartir un fragmento de código que uso actualmente:

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

Y ahora puedo escribir código como este:

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

Puede parecer mucho código, pero cuando está escrito en CoffeeScript es bastante pequeño:

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

99
Encuentro que el enfoque original de OP no solo es mucho más minimalista sino más elegante que esto. Parece excesivo escribir tanto código cuando el método de OP es más corto y no implica devoluciones de llamada.
Lev

Para casos simples, tienes razón. Pero para situaciones más complejas que involucran mucho código en ambos casos, creo que mi enfoque es mejor.
Eternal1

44
¿En qué situación compleja sería mejor este enfoque que una simple declaración if / else?
Jarvl

19

Tuve un caso en el que quería ver si un objeto existe dentro de otro, así que agregué algo a la primera respuesta para buscar un selector dentro del selector.

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

18

Qué tal si:

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

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

Es muy mínimo y le ahorra tener que incluir el selector $()cada vez.


3
Esto se lee como "si existe cosa" en lugar de "si existe cosa" que se if($("#thing").exists(){}lee como. Además, no es la forma jQuery.
1j01

15

Estoy usando esto:

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

Ejecute la cadena solo si existe un elemento jQuery: http://jsfiddle.net/andres_314/vbNM3/2/


14

Aquí está mi existmétodo favorito en jQuery

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

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

y otra versión que admite devolución de llamada cuando el selector no existe

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

Ejemplo:

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

14

$("selector") devuelve un objeto que tiene la lengthpropiedad Si el selector encuentra algún elemento, se incluirá en el objeto. Entonces, si verifica su longitud, puede ver si existe algún elemento. En JavaScript 0 == false, así que si no obtienes 0tu código se ejecutará.

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

55
"dar una matriz" - No, no lo hace. Le proporciona un objeto jQuery (que comparte algunas propiedades con una matriz). Su respuesta es esencialmente la misma que la de Tim Büthe de 2009 también.
Quentin

11

Aquí está el ejemplo completo de diferentes situaciones y la forma de verificar si el elemento existe usando direct if en jQuery selector puede o no funcionar porque devuelve una matriz o elementos.

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

SOLUCIÓN FINAL

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

Puede probar $ ("# xysyxxs") en su depurador, verá que jquery no devuelve nulo o indefinido. Entonces la solución final no funcionaría
Béranger

11

No tiene que verificar si es mayor que me 0gusta $(selector).length > 0, $(selector).lengthes suficiente y una forma elegante de verificar la existencia de elementos. No creo que valga la pena escribir una función solo para esto, si quieres hacer más cosas adicionales, sí.

if($(selector).length){
  // true if length is not 0
} else {
  // false if length is 0
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.