¿Existe 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
}

¿Existe una forma más elegante de abordar esto? ¿Quizás un complemento o una función?

preguntado el 27 de agosto de 08 a las 20:08

30 Respuestas

En JavaScript, todo es 'verdadero' o 'falso', y para números 0 significa false, todo lo demas true. Entonces podrías escribir:

if ($(selector).length)

No necesitas eso >0 parte.

Respondido el 22 de junio de 20 a las 10:06

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

suficientemente interesante NaN != false. - Robert

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

@Robert y typeof NaN == 'number' - Oriadam

¿Existe un beneficio tangible de no incluir el > 0 ¿parte? Me parece más claro de esa manera. - Sinjai

¡Sí!

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

Respondido 14 Feb 17, 01:02

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

Sus $.fn.exists Un ejemplo 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 tienes, lo cual es una tontería. - C Snover

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

@quixoto, lo siento, pero .length es un estándar en muchos idiomas que no necesita ajuste. ¿De qué otra manera interpreta .length? - cuadrado rojo

En mi opinión, es al menos una indirección lógica desde el concepto de "una longitud de lista mayor que cero" hasta el concepto de "los elementos para los que escribí un selector existen". 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 con algún costo de desempeño. - Ben Zotto

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 puede utilizar lo siguiente. Si no hay valores en la matriz de objetos jQuery, obtener el primer elemento de la matriz devolvería undefined.

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

Respondido el 30 de junio de 15 a las 11:06

El primer método se lee mejor. $ ("a"). existe () se lee como "si los elementos existen". $ .exists ("a") se lee como "si existen elementos". - extraño

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

Ya existen métodos que no se pueden encadenar, como las funciones attr y data. Sin embargo, veo su punto y, por lo que vale, solo pruebo la longitud> 0 de todos modos. - Matthew Crumley

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

El asunto del encadenamiento es una completa tontería: hay mucho de jQuery $.fn métodos que devuelven algo que no sea un nuevo objeto jQuery y, por lo tanto, no encadenan. - Alnitak

Puedes usar esto:

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

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

Respondido el 29 de junio de 16 a las 07:06

¿No viste que Tim Büthe ya le había dado esta https://www.youtube.com/watch?v=xB-eutXNUMXJtA&feature=youtu.be 2 años antes que tú? - Th4t Guy

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

esta respuesta y comentarios resumen cómo funciona stackoverflow - aswzen

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

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

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

Y es mejor que la alternativa de escribir el tuyo propio jQuery función. Esa alternativa es más lenta, por las razones que dijo @snover. Pero también daría a otros programadores la impresión de que el exists() La función es algo inherente a jQuery. JavaScript serí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).

Respondido 09 Feb 19, 06:02

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

Tiene razón en que no es tan aplicable como los selectores. Sin embargo, funciona 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

@Noz if(document.querySelector("#foo a.special")) trabajaría. No se necesita jQuery. - Cielos azules

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

¿Recuerda los buenos tiempos en los que 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 escribí mal y entendí mal la carcasa del personaje. - JustJohn

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 desreferenciación de matriz para obtener el primer elemento de la matriz. Vuelve undefined si no hay ningún elemento en el índice especificado.

Respondido el 18 de enero de 14 a las 13:01

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

@JasonWilczak ¿Te importaría comentar por qué no en su lugar: .eq [0] o .first () para referirse a un primer elemento encontrado en lugar de conversión de tipos? - Jean Paul también conocido como el_vete

NO, jQuery.first() or 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 se pueden usar tal cual: if(jQuery("#does-not-exist").eq(0)) alert("#does-not-exist exists") - Salman A

Correcto. .eq(0) devuelve solo otro objeto jQuery truncado a la longitud 1 o 0. .first() es solo un método de conveniencia para .eq(0). Sin embargo, .get(0) devuelve el primer elemento DOM o undefined y 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 0 a la cuerda '0'. Entonces, si la conversión de tipos es un problema, podría usar $.find(selector)['0'] en lugar de. - Robert

Puedes usar:

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

A pequeño más elegante, quizás.

Respondido el 17 de Septiembre de 08 a las 21:09

Esto es demasiado para algo tan simple. ver la respuesta de Tim Büthe - vsync

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 caro para una tarea muy sencilla. Solo mire la implementación de jquery if .is () y verá cuánto código necesita procesar para responder esta simple pregunta. Además, no es obvio lo que quiere hacer exactamente, por lo que es la misma o tal vez menos elegante que la solución en cuestión. - micropro.cz

@earnaz gran punto, buena captura. Sin embargo, no veo dónde eso es realmente una preocupación que valga la pena. Desarrolladores que identifican elementos con 666 probablemente tenga 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 veraz y, por lo tanto, debemos Satisfacer la condición. - Todd

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

Este complemento se puede utilizar 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 se disparará si el elemento existe, el segundo se disparará si el elemento lo hace. 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 lo hace. 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    */
    }
})

Respondido el 12 de junio de 16 a las 12:06

En la versión de devolución de llamada, ¿no debería el Has Items la devolución de llamada realmente pasa el objeto como un argumento? - Chris Marisic

Veo que la mayoría de las respuestas aquí son no es correcto como deberían ser, comprueban la longitud del elemento, puede ser OK en muchos casos, pero no 100%, imagina si el número pasa a la función en su lugar, entonces hago un prototipo de una función que verifica todas las condiciones y devuelve 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

Respondido 17 Jul 19, 14:07

Realmente no hay necesidad de jQuery. 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 ...

contestado el 10 de mayo de 13 a las 11:05

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

Podrías usar esto:

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

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

respondido 15 mar '16, 10:03

La razón por la que todas las respuestas anteriores requieren .length parámetro es que están usando principalmente jquery's $() selector 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 todos coincide con ese selector y rellena una matriz con ellos.

El parámetro ['longitud'] no es necesario ni útil y el código será mucho más rápido si usa directamente document.querySelector(selector) en su lugar, porque devuelve el primer elemento que coincide o 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 la referencia si lo 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 ser deseable. 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 en realidad no necesita el elemento y desea obtener / almacenar solo un verdadero / falso, ¡simplemente no 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);

Respondido 13 ago 14, 09:08

Is $.contains() ¿Lo que quieras?

jQuery.contains( container, contained )

La $.contains() El 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 hijo directo o anidado más profundamente. De lo contrario, devuelve falso. Solo se admiten nodos de elementos; si el segundo argumento es un texto o un nodo de comentario, $.contains() devolverá falso.

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

Respondido el 20 de junio de 20 a las 12:06

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

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

Respondido 20 Feb 20, 15:02

No es necesario comprobar que la longitud del tiempo es mayor que 0, si ($ ('# elementid'). Length) {} será suficiente. - Pranav Labhe

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

He encontrado if ($(selector).length) {} ser insuficiente. Romperá silenciosamente tu aplicación cuando selector es 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 mejor solución, ya que esta es un poco pesada.

Edit: ¡ADVERTENCIA! Esto no funciona en IE cuando selector es una cuerda.

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

Respondido 07 Feb 12, 21:02

¿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 un 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

¿Por qué demonios pasarías un objeto vacío? {} a $()? - Todos los trabajadores son esenciales

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

Acabo de notar que el hilo de problemas de jquery al que hace referencia @FagnerBrack se actualizó poco después de su comentario; parece que no va a desaparecer después de todo. - José Gabriel

Comprobando la existencia de un elemento ¡está cuidadosamente documentado en el sitio web oficial de jQuery!

Utiliza .largo propiedad 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();

Respondido el 10 de Septiembre de 17 a las 13:09

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

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

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

contestado el 04 de mayo de 15 a las 06:05

Porque Boolean(x) enlatado a veces ser más eficiente. - usuario7892745

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

contestado el 28 de mayo de 12 a las 16:05

Odio estas ingeniosas formas de evitar usar un if donde un if mejoraría la legibilidad a un costo de 2 bytes. - Emile Bergeron

Además, los minificadores harán todo esto && para ti. - usuario7892745

Jaja ahora, 8 años después, es tan común en React JS 😄 - Tilak Maddy

Intenta probar para DOM elementos

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

Respondido 09 ago 15, 05:08

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

Usar document.documentElement ya que el primer argumento cumple la semántica de la exists método cuando queremos aplicarlo únicamente para comprobar la existencia de un elemento en el documento actual.

A continuación, he reunido un fragmento que compara jQuery.exists() Contra el $(sel)[0] y $(sel).length enfoques que ambos regresan truthy valores para $(4) mientras $(4).exists() devoluciones false. En el contexto de comprobando la existencia de un elemento en el DOM este parece ser el resultado deseado.

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

contestado el 23 de mayo de 17 a las 14:05

No es necesario 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 $ () (chisporroteo) en jQuery y usa más potencia de cálculo, 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

Respondido 17 Jul 19, 17:07

Solo me gusta usar JavaScript simple para hacer esto.

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

Respondido el 19 de junio de 16 a las 01:06

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 se escribe en CoffeeScript es bastante pequeño:

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

Respondido 16 Abr '15, 12:04

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

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

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

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

Respondido 06 Abr '12, 01:04

Qué tal si:

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

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

Es mínimo y le ahorra tener que encerrar el selector con $() Cada vez

respondido 05 mar '14, 01:03

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

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/

Respondido 02 ago 12, 01:08

$("selector") devuelve un objeto que tiene la length propiedad. 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 0 su código se ejecutará.

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

Respondido el 03 de enero de 19 a las 13:01

"dar una matriz" - No, no lo hace. Te da 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

Aqui esta mi favorito exist método 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
    }
);

respondido 08 mar '16, 20:03

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

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

Respondido el 29 de Septiembre de 20 a las 04:09

Aquí está el ejemplo completo de diferentes situaciones y la forma de verificar si el elemento existe usando direct if on 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

Demo

console.log("existing id", $('#id-1').length)
console.log("non existing id", $('#id-2').length)

console.log("existing class single instance", $('.cls-1').length)
console.log("existing class multiple instance", $('.cls-2').length)
console.log("non existing class", $('.cls-3').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id-1">
  <div class="cls-1 cls-2"></div>
  <div class="cls-2"></div>
</div>

Respondido 17 ago 20, 10:08

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

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.