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

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.

¡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

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

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

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.

Puedes usar:

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

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

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

jsviolín

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

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

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

Podrías usar esto:

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

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

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

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

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
}

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

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

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

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).length && //Do something

Intenta probar para DOM elementos

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

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>

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

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

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 mínimo y le ahorra tener que encerrar el selector con $() 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/

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

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

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
}

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>