Cómo comprobar si un elemento está oculto en jQuery

1. Método para comprobar si un elemento está oculto en jQuery
2. Comprende el selector :hidden en jQuery
3. Consejos rápidos para comprobar si un elemento está oculto

Cualquier objeto en DOM puede ser escondido asignando su propiedad CSS de display como none.

Método para comprobar si un elemento está oculto en jQuery

Primero, creamos un elemento de encabezado <h1> y aplicamos la propiedad CSS en línea para ocultarlo.

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

En jQuery hay dos filtros de visibilidad - los selectores :hidden y :visible. Especifican si el elemento está oculto y visible, respectivamente. Se puede comprobar fácilmente por el siguiente método.

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

Da una alerta que dice, The heading is hidden.

Nota: Si coloca varios elementos con uno oculto y otro visible, se activan ambos is(":visible") y is(":hidden").

Comprende el selector :hidden en jQuery

El selector :hidden identifica un elemento como oculto por las siguientes razones:

1. Tiene la propiedad display de CSS con un valor de none.
2. El elemento es un elemento de forma con type="hidden".
3. Los valores height y width del elemento se establecen explícitamente en 0.
4. El elemento padre está oculto.

Por lo tanto, los elementos con la propiedad visibility de CSS establecida como hidden o la propiedad opacity como 0 se consideran visibles en jQuery ya que todavía consumen espacio en el DOM.

Alternativamente, para comprobar la propiedad CSS específica del elemento para comprobar si está oculto, podemos usar el siguiente método.

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

Consejos rápidos para comprobar si un elemento está oculto

jQuery no puede aprovechar el método nativo DOM querySelectorAll(). También crea algunos problemas de rendimiento ya que obliga al navegador a volver a mostrar la página para determinar la visibilidad. Así que en lugar de usar elementos, puedes usar clases o selectores CSS y luego usar .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>

Aquí se puede acceder directamente a los hiddenHeadings y se puede operar sobre ellos.