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

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

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.

¡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

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

Puedes usar esto:

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

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

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

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.

Puedes usar:

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

Un poco más elegante, tal vez.

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

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

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

Podrías usar esto:

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

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

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

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.

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

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
}

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

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?...
}

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

Intenta probar el DOMelemento

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

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 .

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

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

Solo me gusta usar JavaScript simple para hacer esto.

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

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

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

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.

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/

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

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

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

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
}