JavaScript - Como saber se um Elemento está Oculto usando o jQuery

Quando estamos utilizando o jQuery no JavaScript, muitas vezes queremos tomar uma ação baseada no estado de um elemento. Um dos estados bastante utilizados é o de se o elemento está visível ou não. Um elemento é considerado visível quando ele ocupa espaço no documento. Elementos visíveis tem altura ou largura maior do que zero.

Para podermos descobrir se um elemento está oculto, temos basicamente duas ferramentas para utilizar. A primeira que vamos utilizar é a :visible.

JavaScript – usando :visible com o jQuery

O seletor :visible verifica se o elemento está visível dentro do DOM.

$(document).ready(function() {
    if($("#content").is(":visible"))
    {
        alert('elemento é visível no DOM');
    }
    else
    {
        alert('elemento não é visível no DOM');
    }
});

$(document).ready(function() {

if($("#content").is(":visible"))

{

alert('elemento é visível no DOM');

}

else

{

alert('elemento não é visível no DOM');

}

});

Abaixo temos um exemplo utilizando este seletor para determinar uma ação dentro do programa:

&lt;div id="countries"&gt;
  &lt;div id="p1"&gt;EUA&lt;/div&gt;
  &lt;div style="display:none" id="p2"&gt;Canada&lt;/div&gt;
  &lt;div id="p3"&gt;Mexico&lt;/div&gt;
&lt;/div&gt;

<div style="display:none" id="p2">Canada</div>

<div id="p3">Mexico</div>

</div>

Para checar se a div #countires está visível, use a função is() passando o seletor “:visible”:

if( $('#countries').is(':visible') ) {
  // está visível, faça algo
} else {
  // não está visível, faça algo
}

if( $('#countries').is(':visible') ) {

// está visível, faça algo

} else {

// não está visível, faça algo

}

Loop pelas divs visíveis dentro da div #countries:

$("#countries div:visible").each( function() {
  document.write($(this).html()+'&lt;br /&gt;');
});

$("#countries div:visible").each( function() {

document.write($(this).html()+'<br />');

});

O resultado acima será:

EUA

Mexico

JavaScript – usando :hidden no jQuery

O seletor :hidden faz a verificação oposta, se o elemento está oculto dentro da DOM

var isHidden = $( "#myDiv" ).is( ":hidden" );

1	var isHidden = $( "#myDiv" ).is( ":hidden" );

Com esses dois seletores, é possível verificar o estado do elemento e prosseguir com o código baseado na resposta. Você conhece outras maneiras de fazer esta operação no JavaScript? Compartilhe seus comentários na seção abaixo!

Caso deseje explorar outras questões, pode conferir nossos vídeos sobre JavaScript. Abaixo estão alguns exemplos: