javascript - variable - ¿Existe una función “existe” para jQuery?




typeof javascript (20)

¡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

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


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

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.


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

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

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>


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


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

No hay necesidad de jQuery

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

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


Podrías usar esto:

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

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

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
}

Puedes usar esto:

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

Puedes usar:

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

Un poco más elegante, quizás.


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

Simplemente me gusta usar javascript de vainilla para hacer esto.

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

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

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

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

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




jquery