objeto - saber si una variable existe javascript

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

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

Answer 1

¡Sí!

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

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

Esto es en respuesta a: Podcast Code podcast con Jeff Atwood

Answer 2

Aquí está mi método favorito de exist 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 soporta 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 3

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

if ($(selector).length)

No necesitas esa parte >0 .

Answer 4

Es $.contains() lo que quieres?

jQuery.contains( container, contained )

El $.contains() devuelve true 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 está 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á false.

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

Answer 5

Este complemento se puede utilizar en una sentencia if como if ($(ele).exist()) { /* DO WORK */ } o mediante una devolución de llamada.

Enchufar

;;(function($) {
    if (!$.exist) {
        $.extend({
            exist: function() {
                var ele, cbmExist, cbmNotExist;
                if (arguments.length) {
                    for (x in arguments) {
                        switch (typeof arguments[x]) {
                            case ''function'':
                                if (typeof cbmExist == "undefined") cbmExist = arguments[x];
                                else cbmNotExist = arguments[x];
                                break;
                            case ''object'':
                                if (arguments[x] instanceof jQuery) ele = arguments[x];
                                else {
                                    var obj = arguments[x];
                                    for (y in obj) {
                                        if (typeof obj[y] == ''function'') {
                                            if (typeof cbmExist == "undefined") cbmExist = obj[y];
                                            else cbmNotExist = obj[y];
                                        }
                                        if (typeof obj[y] == ''object'' && obj[y] instanceof jQuery) ele = obj[y];
                                        if (typeof obj[y] == ''string'') ele = $(obj[y]);
                                    }
                                }
                                break;
                            case ''string'':
                                ele = $(arguments[x]);
                                break;
                        }
                    }
                }

                if (typeof cbmExist == ''function'') {
                    var exist =  ele.length > 0 ? true : false;
                    if (exist) {
                        return ele.each(function(i) { cbmExist.apply(this, [exist, ele, i]); });
                    }
                    else if (typeof cbmNotExist == ''function'') {
                        cbmNotExist.apply(ele, [exist, ele]);
                        return ele;
                    }
                    else {
                        if (ele.length <= 1) return ele.length > 0 ? true : false;
                        else return ele.length;
                    }
                }
                else {
                    if (ele.length <= 1) return ele.length > 0 ? true : false;
                    else return ele.length;
                }

                return false;
            }
        });
        $.fn.extend({
            exist: function() {
                var args = [$(this)];
                if (arguments.length) for (x in arguments) args.push(arguments[x]);
                return $.exist.apply($, args);
            }
        });
    }
})(jQuery);

jsFiddle

Puede especificar una o dos devoluciones de llamada. El primero disparará si el elemento existe, el segundo disparará si el elemento no existe. Sin embargo, si elige pasar solo una función, solo se activará cuando 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 usar 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 de jQuery

Ejemplos de uso

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 6

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 7

He encontrado if ($(selector).length) {} es insuficiente. Romperá silenciosamente su aplicación cuando el selector sea ​​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 ya que esta es un poco pesada.

Edición: ¡ADVERTENCIA! Esto no funciona en IE cuando el selector es una cadena.

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

Answer 8

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

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

$.contains() toma dos elementos DOM y comprueba si el primero contiene el segundo.

El uso de document.documentElement como primer argumento cumple la semántica del método de exists cuando deseamos aplicarlo únicamente para verificar la existencia de un elemento en el documento actual.

A continuación, he reunido un fragmento de jQuery.exists() que compara jQuery.exists() con los jQuery.exists() $(sel)[0] y $(sel).length que devuelven valores de truthy para $(4) mientras que $(4).exists() devuelve 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>

Answer 9

Intente probar el elemento DOM

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

Answer 10

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

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 tu propia función jQuery. Esa alternativa es más lenta, por las razones que @snover declaró. Pero también le daría a otros programadores la impresión de que la función existencia () es algo inherente a jQuery. JavaScript debería / debería ser entendido por otros que editan 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).

Answer 11

La razón por la que todas las respuestas anteriores requieren que el parámetro .length sea ​​que están utilizando principalmente el selector $() jquery que tiene un selector de consulta detrás de las cortinas (o lo están usando directamente). Este método es bastante lento porque necesita analizar todo el árbol DOM en busca de todas las coincidencias con ese selector y rellenar una matriz con ellos.

El parámetro [''length''] no es necesario o útil y el código será mucho más rápido si usa directamente document.querySelector(selector) , 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 (por lo tanto, mantengamos la referencia alrededor 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 deseado. 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 lo doble !! Funciona para los zapatos que se desatan, así que ¿por qué hacer nudos 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 12

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

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

Answer 13

No hay necesidad de jQuery

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

Answer 14

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 cualquier motivo, no desea asignar un ID al elemento, aún puede utilizar cualquier otro método de JavaScript diseñado para acceder al DOM.

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

Answer 15

No tiene que verificar si es mayor que 0 como $(selector).length > 0 , $(selector).length es suficiente y una manera 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
}

Answer 16

Podrías usar esto:

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

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

Answer 17

Puede comprobar si el elemento está presente o no utilizando 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 18

Puedes guardar algunos bytes escribiendo:

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

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

Answer 19

Puedes usar esto:

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

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

Answer 20

Puedes usar:

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

Un poco más elegante, quizás.

Answer 21

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 con $() cada vez.

Answer 22

Si usaste

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

Usted 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, desde la FAQ :

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

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

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

Answer 23

Simplemente me gusta usar javascript de vainilla para hacer esto.

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

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

Answer 25

Veo que la mayoría de las respuestas aquí no son precisas como deberían, verifican la longitud del elemento, puede estar bien en muchos casos, pero no en el 100%, imagínese si el número pasa a la función, así que prototipo de una función que verifica todas Condiciones y devolver la respuesta como debe 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: '''', url: ''http://www..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 26

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

Answer 27

La comprobación de la existencia de un elemento se documenta claramente en el sitio web oficial de jQuery.

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

Answer 28

$("selector" ) da un objeto que tiene datos de length . Si hay elementos como los define en el selector, los obtendrá del objeto. Entonces, si verifica la longitud que ya puede encontrar, ¿existe algún elemento? En javascript 0 == false también null == false . Si no obtienes 0 tus códigos se ejecutarán.

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

Answer 29

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

Answer 30

if ( $(''#myDiv'').size() > 0 ) { //do something }

size() cuenta el número de elementos devueltos por el selector