Como verificar se um elemento está escondido em jQuery

1. Método para verificar se um elemento está escondido em jQuery
2. Entenda o :hidden Selector em jQuery
3. Dicas rápidas para verificar se um elemento está escondido

Qualquer objeto no DOM pode ser escondido atribuindo sua propriedade CSS de display como none.

Método para verificar se um elemento está escondido em jQuery

Primeiro, criamos um elemento de cabeçalho <h1> e aplicamos a propriedade CSS inline para escondê-lo.

<h1 style="display:none;">Your text here</h1>

Em jQuery há dois filtros de visibilidade - :hidden e :visible selectors. Eles especificam se o elemento está oculto e visível, respectivamente. Ele pode ser facilmente verificado pelo método a seguir.

<script>
$(document).ready(function(){
//checks if document is ready
 if($("h1").is(":hidden")){
  alert("The heading is hidden.");
  //your function here
 } 
if($("h1").is(":visible"){
  alert("The heading  is visible.");
 }
});
</script>

Ele dá um alerta dizendo: The heading is hidden..

Nota: Se você colocar vários elementos com um sendo oculto e outro sendo visível, isso aciona tanto is(":visible") como is(":hidden").

Entenda o :hidden Selector em jQuery

O seletor :hidden identifica um elemento como oculto pelas seguintes razões:

1. Possui propriedade CSS display com um valor de none.
2. O elemento é um elemento de forma com type="hidden".
3. Os valores de height e width do elemento são definidos explicitamente como 0.
4. O elemento pai é oculto.

Portanto, elementos com a propriedade visibility do CSS definida como hidden ou opacity como 0 são considerados visíveis em jQuery, pois ainda consomem espaço no DOM.

Alternativamente, para verificar a propriedade específica CSS do elemento para verificar se ele está escondido, podemos utilizar o seguinte método.

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

Dicas rápidas para verificar se um elemento está escondido

jQuery não pode tirar vantagem do método nativo DOM querySelectorAll(). Ele também cria alguns problemas de desempenho, pois força o navegador a renderizar novamente a página para determinar a visibilidade. Assim, ao invés de utilizar elementos, você pode utilizar classes ou seletores CSS e então utilizar .find(":hidden").

<h1 style="display:none;">Your text here</h1>
<script>
 $(document).ready(function(){
  var hiddenHeadings = $("body").find(":hidden").is("h1");
   if(hiddenHeadings.length > 0){
    alert("There is atleast one heading hidden.");
   }
 });
</script>

Aqui, os hiddenHeadings podem ser acessados diretamente e podem ser operados.