Existe uma "existe" função jQuery?

Question

Como posso verificar a existência de um elemento na sua vida???

O código atual que eu tenho é este:

if ($(selector).length > 0) {
    // Do something
}

Existe uma forma mais elegante de abordagem?Talvez um plugin ou uma função?

Answer 1

Em JavaScript, tudo é "truthy' ou 'falsy", e para os números 0 (e NaN) significa false, tudo o resto true.Então, você poderia escrever:

if ($(selector).length)

Você não precisa que >0 a parte.

Answer 2

Sim!

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

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

Isto é em resposta a: Pastoreando o Código de podcast com Jeff Atwood

Answer 3

Se você usou

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

você implicaria que o encadeamento foi possível quando ele não está.

O melhor seria:

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

Em alternativa, do FAQ:

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

Você pode também usar a seguinte.Se não há valores no objeto jQuery matriz, em seguida, recebendo o primeiro item na matriz retornaria indefinido.

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

Answer 4

Você pode usar esse:

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

---

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

Answer 5

A forma mais rápida e semanticamente auto-explicativa maneira de verificar a existência é, na verdade, pela simples de utilização JavaScript:

if (document.getElementById('element_id')) {
    // Do something
}

Ele é um pouco mais para escrever do que o jQuery comprimento alternativa, mas executa mais rápido, pois é um nativo JS método.

E é melhor do que a alternativa de escrever o seu próprio jQuery função.Essa alternativa é mais lento, para as razões @snover afirmou.Mas também daria outros programadores a impressão de que o exists() a função é algo inerente a jQuery. JavaScript poderia/deveria ser compreendido pelos outros editar seu código, sem maior conhecimento da dívida.

NB: Notar a falta de um '#' antes do element_id (uma vez que é simples JS, não jQuery).

Answer 6

Você pode guardar alguns bytes por escrito:

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

Isso funciona porque cada objeto jQuery também se disfarça como uma matriz, então, podemos usar a matriz de referência do operador para obter o primeiro item da matriz.Ele retorna undefined se não houver nenhum item no índice especificado.

Answer 7

Você pode usar:

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

Um pouco mais elegante, talvez.

Answer 8

Este plugin pode ser usado em um if instrução como if ($(ele).exist()) { /* DO WORK */ } ou, usando uma chamada de retorno.

Plugin

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

Você pode especificar um ou dois retornos de chamada.O primeiro será acionado se o elemento não existe, a segunda será acionado se o elemento não não existem.No entanto, se você escolher para passar apenas uma função, ela só será acionado quando o elemento não existe.Assim, a cadeia vai morrer se o elemento selecionado não não existem.É claro que, se ele existe, primeiro, a função de fogo e a cadeia vai continuar.

Tenha em mente que o uso de a de retorno de chamada de variante ajuda a manter chainability – elemento é retornado e você pode continuar o encadeamento de comandos como com qualquer outro método jQuery!

Exemplo Usa

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

Vejo que a maioria das respostas estão aqui não precisas como eles devem ser, eles verificam o elemento de comprimento, pode ser OK em muitos casos, porém não 100%, imagine se o número de passar para a função em vez disso, então eu protótipo de uma função que verifique todas as condições e retornar a resposta como deve ser:

$.fn.exists = $.fn.exists || function() { 
  return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement)); 
}

Isto irá verificar o comprimento e o tipo, Agora você pode verificá-lo desta forma:

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

Não há necessidade de jQuery realmente.Com JavaScript puro é mais fácil e semanticamente correto para verificar:

if(document.getElementById("myElement")) {
    //Do something...
}

Se por qualquer razão você não quiser colocar um id para o elemento, você ainda pode usar qualquer outro método JavaScript desenvolvido para acessar o DOM.

jQuery é muito legal, mas não deixe puro JavaScript cair no esquecimento...

Answer 11

Você pode usar esse:

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

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

Answer 12

A razão de todas as respostas anteriores requerem o .length parâmetro é que eles são em sua maioria usando jquery $() selector, que tem querySelectorAll por trás das cortinas (ou eles estão usando diretamente).Este método é bastante lento, porque ele precisa analisar toda a árvore DOM olhando para todos corresponde ao seletor e preencher uma matriz com eles.

A ['comprimento'] parâmetro não é necessário ou útil e o código será muito mais rápido se você usar diretamente document.querySelector(selector) em vez disso, porque ele retorna o primeiro elemento corresponde ou null se não encontrado.

function elementIfExists(selector){  //named this way on purpose, see below
    return document.querySelector(selector);
}
/* usage: */
var myelement = elementIfExists("#myid") || myfallbackelement;

No entanto, este método deixa-nos com o objeto real a ser devolvido;o que é bom, se não vai ser salvo como variável e usado repetidamente (mantendo a referência se em torno de nós se esqueça).

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

Em alguns casos, isso pode ser desejado.Ele pode ser usado em um loop 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;

Se você não precisa realmente o elemento e deseja obter/loja de verdadeiro/falso, basta dar um duplo não é !!Ele funciona para sapatos que vêm desatado, então por nó aqui?

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

Eu encontrei if ($(selector).length) {} para ser insuficiente.Ele silenciosamente quebra de seu aplicativo quando selector é um objeto vazio {}.

var $target = $({});        
console.log($target, $target.length);

// Console output:
// -------------------------------------
// [▼ Object              ] 1
//    ► __proto__: Object

Minha única sugestão é realizar uma verificação adicional para {}.

if ($.isEmptyObject(selector) || !$(selector).length) {
    throw new Error('Unable to work with the given selector.');
}

Eu ainda estou à procura de uma melhor solução, porém como este é um pouco pesado.

Editar: ATENÇÃO! Isso não funciona no IE quando selector é uma seqüência de caracteres.

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

Answer 14

É $.contains() o que você quer?

jQuery.contains( container, contained )

O $.contains() método retorna true se o elemento DOM fornecida pelo segundo argumento é um descendente do elemento DOM fornecida pelo primeiro argumento, se é um filho direto ou aninhada mais profundamente.Caso contrário, retorna false.Apenas os nós do elemento são suportados;se o segundo argumento é um texto ou comentário nó, $.contains() irá retornar false.

Nota:O primeiro argumento deve ser um elemento DOM, não um objeto jQuery ou JavaScript puro objeto.

Answer 15

Você pode verificar o elemento está presente, ou não, usando o comprimento em java script.Se o comprimento for maior que zero, em seguida, elemento está presente se o comprimento for zero, então elemento não 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

Verificando a existência de um elemento é perfeitamente documentado no diário oficial do jQuery próprio site!

Use o .comprimento propriedade do jQuery coleção retornada por sua seletor:

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

Note que isso nem sempre é necessário para testar se um elemento existe.O código seguinte irá mostrar o elemento se ele existe, e não fazer nada (sem erros) se não:

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

Answer 17

isto é muito semelhante para todas as respostas, mas por que não usar o ! operador duas vezes, assim você pode obter um valor booleano:

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

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

Answer 18

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

Answer 19

Tente o teste para DOM elemento

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

Answer 20

Inspirado por hiway resposta Eu vim com o seguinte:

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

jQuery.contém leva dois elementos DOM e verifica se o primeiro contém o segundo.

Usando document.documentElement como o primeiro argumento cumpre a semântica da exists método quando queremos aplicá-la apenas para verificar a existência de um elemento no documento atual.

Abaixo, eu coloquei um trecho de código que compara jQuery.exists() contra o $(sel)[0] e $(sel).length abordagens que tanto retorno truthy valores para $(4) enquanto $(4).exists() retorna false.No contexto de verificando a existência de um elemento no DOM, este parece ser o resultado desejado.

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

Eu só gosto de usar plain vanilla javascript para fazer isso.

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

Answer 22

Não há necessidade de jQuery

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

Answer 23

Me deparei com essa pergunta e eu gostaria de compartilhar um trecho de código que eu uso atualmente:

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

E agora eu posso escrever código como este -

$("#elem").exists(function(){
    alert ("it exists");
}).otherwise(function(){
    alert ("it doesn't exist");
});

Pode parecer um monte de código, mas quando escrito em CoffeeScript é bem pequena:

$.fn.exists = (callback) ->
    exists = @length
    callback.call() if exists        
    new class
       otherwise: (fallback) ->            
            fallback.call() if not exists

Answer 24

Eu tive um caso em que eu queria ver se existe um objeto dentro de outro então eu adicionei algo para a primeira resposta para verificar se há um seletor de dentro do seletor ...

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

Como sobre:

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

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

É muito mínima e evita que você coloque o selector com $() a cada vez.

Answer 26

Eu estou usando este:

    $.fn.ifExists = function(fn) {
      if (this.length) {
        $(fn(this));
      }
    };
    $("#element").ifExists( 
      function($this){
        $this.addClass('someClass').animate({marginTop:20},function(){alert('ok')});               
      }
    ); 

Executar a cadeia só se um jQuery elemento de existir - http://jsfiddle.net/andres_314/vbNM3/2/

Answer 27

Aqui é o meu favorito exist método do jQuery

$.fn.exist = function(callback) {
    return $(this).each(function () {
        var target = $(this);

        if (this.length > 0 && typeof callback === 'function') {
            callback.call(target);
        }
    });
};

e outra versão que suporta o retorno de chamada quando o selector de não existir

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

Exemplo:

$('#foo .bar').exist(
    function () {
        // Stuff when '#foo .bar' exists
    },
    function () {
        // Stuff when '#foo .bar' does not exist
    }
);

Answer 28

$("selector") retorna um objeto que tem o length propriedade.Se o seletor de encontrar quaisquer elementos, eles serão incluídos no objeto.Então, se você verificar o seu comprimento, você pode ver se existem elementos.Em JavaScript 0 == false, então, se você não ficar 0 seu código será executado.

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

Answer 29

Aqui está o exemplo completo de diferentes situações e a maneira de verificar se o elemento não existe usando direto se no seletor do jQuery pode ou não pode trabalhar porque devolve matriz ou 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

SOLUÇÃO 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

Você não tem que verificar se é maior do que 0 como $(selector).length > 0, $(selector).length é o suficiente e uma elegante maneira de verificar a existência de elementos.Eu não acho que vale a pena escrever uma função apenas por isso, se você quiser fazer mais coisas extras, sim.

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