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

Question

¿Cómo puedo comprobar 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?

Answer 1

En JavaScript, todo es "verdadero" 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.

Answer 2

¡Sí!

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

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

Esto es en respuesta a: Podcast de Código de pastoreo con Jeff Atwood

Answer 3

si usaste

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

daría a entender 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 un valor indefinido.

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

Answer 4

Puedes usar esto:

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

---

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

Answer 5

La forma más rápida y semánticamente autoexplicativa de comprobar 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 afirmó @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 otros que editen su código lo entenderían/deberían entenderlo, sin aumentar la deuda de conocimientos.

NÓTESE BIEN: Observe la falta de un '#' antes del element_id (dado que esto es JS simple, no jQuery).

Answer 6

Puedes ahorrar algunos bytes escribiendo:

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

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

Answer 7

Puedes usar:

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

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

Answer 8

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 activará si el elemento existe, el segundo se activará si el elemento no existe. no existir.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 existir.Por supuesto, si existe, la primera función se activará y la cadena continuará.

Tenga en cuenta que utilizar el La variante de devolución de llamada ayuda a mantener la capacidad de encadenamiento. – ¡El elemento se devuelve y puedes 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    */
    }
})

Answer 9

Veo que la mayoría de las respuestas aquí son no es correcto como deben ser, verifican la longitud del elemento, puede ser DE ACUERDO en muchos casos, pero no en el 100%, imagina si el número pasa a la función, así que creo 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 puedes 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

Answer 10

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

Answer 11

Podrías usar esto:

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

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

Answer 12

La razón por la que todas las respuestas anteriores requieren la .length El parámetro es que en su mayoría utilizan jquery. $() 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 todo coincide con ese selector y completa una matriz con ellos.

El parámetro ['longitud'] no es necesario ni útil y el código será mucho más rápido si lo usa directamente document.querySelector(selector) en cambio, 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 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 ser deseable.Se puede utilizar 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 lo duplique!Funciona para zapatos que vienen desatados, así que ¿por qué hacer un nudo 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);

Answer 13

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

Todavía estoy buscando una solución mejor porque esta es un poco pesada.

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

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

Answer 14

Es $.contains() ¿Lo que quieras?

jQuery.contains( container, contained )

El $.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 un anidado más profundo.De lo contrario, devuelve falso.Sólo 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 ni un objeto JavaScript simple.

Answer 15

Puede verificar que el elemento esté presente o no usando 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
}

Answer 16

Comprobando la existencia de un elemento. ¡Está claramente documentado en el sitio web oficial de jQuery!

Utilizar el .longitud Propiedad de la colección jQuery devuelta por su selector:

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

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

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

Answer 17

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

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

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

Answer 18

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

Answer 19

Intente realizar pruebas para DOM elemento

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

Answer 20

Inspirado por la respuesta de la autopista Se me ocurrió lo siguiente:

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

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

Usando document.documentElement ya que el primer argumento cumple con la semántica del 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() en contra de $(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>

Answer 21

Simplemente me gusta usar javascript simple para hacer esto.

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

Answer 22

No es necesario jQuery

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

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

Answer 24

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 verificar si había 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;
};

Answer 25

Qué tal si:

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

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

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

Answer 26

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/

Answer 27

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

Answer 28

$("selector") devuelve un objeto que tiene la length propiedad.Si el selector encuentra algún elemento, se incluirá en el objeto.Entonces, si verificas su longitud, podrás ver si existe algún elemento.En JavaScript 0 == false, así que si no lo consigues 0 su código se ejecutará.

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

Answer 29

Aquí está el ejemplo completo de diferentes situaciones y la forma de verificar si el elemento existe usando direct if en jQuery selector puede funcionar o no 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

Answer 30

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

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