Existe uma function “existe” para jQuery?

Como posso verificar a existência de um elemento no jQuery?

O código atual que tenho é este:

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

Existe uma maneira mais elegante de abordar isso? Talvez um plugin ou uma function?

Em JavaScript, tudo é ‘verdadeiro’ ou ‘falsamente’, e para números 0 (e NaN) significa false , todo o resto é true . Então você poderia escrever:

 if ($(selector).length) 

Você não precisa dessa parte >0 .

Sim!

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

Isso é em resposta a: podcast do Herding Code com Jeff Atwood

Se você usou

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

você implicaria que o encadeamento era possível quando não é.

Isso seria melhor:

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

Alternativamente, a partir do FAQ :

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

Você também pode usar o seguinte. Se não houver valores no array de objects jQuery, obter o primeiro item no array retornará indefinido.

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

Você pode usar isto:

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

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

A maneira mais rápida e mais auto explicativa de verificar a existência é, na verdade, usar JavaScript simples:

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

É um pouco mais longo para escrever do que a alternativa de comprimento do jQuery, mas executa mais rápido, pois é um método JS nativo.

E é melhor que a alternativa de escrever sua própria function jQuery. Essa alternativa é mais lenta, pelas razões apontadas pelo @snover. Mas também daria a outros programadores a impressão de que a function exists () é algo inerente ao jQuery. JavaScript seria / deveria ser entendido por outros editando seu código, sem aumentar o débito do conhecimento.

NB: Observe a falta de um ‘#’ antes do element_id (já que este é JS simples, não o jQuery).

Você pode economizar alguns bytes escrevendo:

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

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

Você pode usar:

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

Um pouco mais elegante, talvez.

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

Plugar

 ;;(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á triggersdo se o elemento existir, o segundo será acionado se o elemento não existir. No entanto, se você escolher passar apenas uma function, ela só será triggersda quando o elemento existir. Assim, a cadeia morrerá se o elemento selecionado não existir. Claro que, se existir, a primeira function será triggersda e a cadeia continuará.

Tenha em mente que o uso da variante de retorno de chamada ajuda a manter a capacidade de cadeia – o elemento é retornado e você pode continuar encadeando 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 */ } }) 

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

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

Se, por algum motivo, você não quiser colocar um ID no elemento, ainda poderá usar qualquer outro método JavaScript projetado para acessar o DOM.

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

Eu vejo a maioria das respostas aqui não são precisas como deveriam ser, eles verificam o comprimento do elemento, pode ser OK em muitos casos, mas não 100%, imagine se o número passar para a function, então protótipo de uma function que verifica todos condições e devolver a resposta como deveria ser:

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

Isto irá verificar tanto o comprimento e tipo, agora você pode verificar 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 

Você poderia usar isto:

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something*/} 

A razão pela qual todas as respostas anteriores requerem o parâmetro .length é que elas estão usando principalmente o seletor $() do jquery, que tem querySelectorAll por trás das cortinas (ou estão usando diretamente). Esse método é bastante lento porque precisa analisar a tree DOM inteira procurando por todas as correspondências para esse seletor e preenchendo uma matriz com elas.

O parâmetro [‘length’] não é necessário ou útil e o código será muito mais rápido se você usar document.querySelector(selector) diretamente, porque ele retorna o primeiro elemento correspondente ou null se não for 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 nos deixa com o object real sendo retornado; o que é bom se não for salvo como variável e usado repetidamente (mantendo assim a referência ao redor se esquecermos).

 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. Pode ser usado em um loop 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; 

Se você realmente não precisa do elemento e quer obter / armazenar apenas um verdadeiro / falso, apenas o dobro não! Funciona para sapatos que se soltam, então por que dar 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); 

Eu encontrei if ($(selector).length) {} para ser insuficiente. Ele interromperá seu aplicativo silenciosamente quando o selector for um object 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 procurando uma solução melhor, já que esta é um pouco pesada.

Edit: AVISO! Isso não funciona no IE quando o selector é uma string.

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

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

jQuery.contains (contêiner, contido)

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

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

Você pode verificar elemento está presente ou não usando comprimento no script java. Se o comprimento for maior que zero, o elemento estará presente se o comprimento for zero, então 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 } 
 $(selector).length && //Do something 

isso é muito parecido com todas as respostas, mas por que não usar o ! operador duas vezes para que você possa obter um booleano:

 jQuery.fn.exists = function(){return !!this.length}; if ($(selector).exists()) { // the element exists, now what?... } 

Tente testar para o elemento DOM

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

Inspirado pela resposta da hiway, desenvolvi o seguinte:

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

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

Usar document.documentElement como o primeiro argumento preenche a semântica do método exists quando queremos aplicá-lo unicamente para verificar a existência de um elemento no documento atual.

Abaixo, eu coloquei um trecho que compara jQuery.exists() com as abordagens $(sel)[0] e $(sel).length , ambas retornando valores truthy para $(4) enquanto $(4).exists() retorna false . No contexto da verificação da existência de um elemento no DOM, esse 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 = "" + inputs[i][0] + "" + testFuncs[0](input) + "" + testFuncs[1](input) + "" + testFuncs[2](input) + ""; $("table").append(tr); } 
 td { border: 1px solid black } 
  
#idoexist
Input!!$(sel)[0]!!$(sel).length$(sel).exists()

Verificar a existência de um elemento é documentado no site oficial da jQuery!

Use a propriedade .length da coleção jQuery retornada pelo seu seletor:

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

Note que nem sempre é necessário testar se um elemento existe. O código a seguir mostrará o elemento se ele existir e não fará nada (sem erros) se não existir:

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

Eu tive um caso onde eu queria ver se um object existe dentro de outro, então eu adicionei algo à primeira resposta para verificar se há um seletor 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; }; 

Eu tropecei nessa questão e 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 assim –

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

Pode parecer muito código, mas quando escrito em CoffeeScript é bem pequeno:

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

Eu apenas gosto de usar o javascript simples de baunilha para fazer isso.

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

E se:

 function exists(selector) { return $(selector).length; } if (exists(selector)) { // do something } 

É muito mínimo e evita que você tenha que colocar o seletor com $() todas as vezes.

Não há necessidade de jQuery

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

Eu estou usando isso:

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

Execute a cadeia somente se existir um elemento jQuery – http://jsfiddle.net/andres_314/vbNM3/2/

$("selector" ) dá um object que tem dados de length . Se houver elementos como você define no seletor, você os obterá do object. Então, se você verificar o comprimento que você já pode encontrar, existe algum elemento. Em javascript 0 == false também null == false . Se você não receber 0 seus códigos serão executados.

 if($("selector").length){ //code in the case } 
 if ( $('#myDiv').size() > 0 ) { //do something } 

size() conta o número de elementos retornados pelo seletor

Aqui está o meu método favorito em 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 retorno de chamada quando o seletor não 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); } } }); }; 

Exemplo:

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

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

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