Muitos usuários têm dúvidas em como checar se um elemento existe no DOM HTML usando o jQuery. Em poucas palavras, como verificar se um elemento existe na página da forma mais simples possível?
Existem diversas maneiras que podemos utilizar para alcançar esse resultado. Uma delas é verificar se a propriedade “length” do seletor do elemento retorna um número maior que 0.
Por exemplo, se tivermos um HTML semelhante ao apresentado abaixo.
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
E queremos verificar se o elemento “myDiv” existe no DOM, ou seja, na página, podemos usar o seguinte código.
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
Simplificando o código
Como muitas coisas em JavaScript são verdadeiras ou falsas, o retorno da propriedade “length” pode ser considerado verdadeiro ou falso também. O retorno é um número, 0 representa “false” e todo o resto representa “true”.
Então podemos simplificar o código da seguinte maneira.
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
Mesmo removendo o comparativo “> 0”, o valor de retorno continua o mesmo.
Criando uma função “exists” para o jQuery
Podemos ir um pouco mais além e adicionar uma função com o nome “exists”. Essa função pode ser usada diretamente com o elemento que queremos verificar.
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
Podemos melhorar ainda mais e evitar que o método represente uma possibilidade de encadeamento. O que não é possível nesse caso. Faremos da seguinte forma então.
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
Perceba que agora nós passamos o seletor como argumento para a função “exists”, ao invés de simular um encadeamento diretamente do objeto.
Verificando a existência de um elemento HTML usando a sintaxe de array
Quando usamos um seletor no jQuery, esse retorna um vetor de elementos. Se tentarmos acessar o primeiro elemento desse vetor e ele retorna “undefined”, indica que o elemento em questão não existe no DOM.
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
Como você pode ver, existem diversas formas de verificar a existência de um elemento HTML na página. Qual a melhor? Bom, aquela que solucionar o seu problema. O importante é que seu código esteja rodando e funcionando.