Controlla se un elemento è nascosto in jQuery

1. Metodo per verificare se un elemento è nascosto in jQuery
2. Comprendere il selettore :hidden in jQuery
3. Suggerimenti rapidi per verificare se un elemento è nascosto

Qualsiasi oggetto in DOM può essere nascosto assegnando la sua proprietà CSS di display come none.

Metodo per verificare se un elemento è nascosto in jQuery

Per prima cosa, creiamo un elemento di intestazione <h1> e applichiamo la proprietà CSS inline per nasconderlo.

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

In jQuery ci sono due filtri di visibilità - selettori :hidden e :visible. Specificano se l’elemento è rispettivamente nascosto e visibile. Può essere facilmente controllato con il seguente metodo.

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

Dà un avviso che dice: The heading is hidden..

Nota: se si posizionano più elementi con uno nascosto e un altro visibile, vengono attivati ​​sia is(":visible") e is(":hidden").

Comprendere il selettore :hidden in jQuery

Il selettore :hidden identifica un elemento come nascosto per i seguenti motivi:

1. Ha una proprietà CSS display con un valore di none.
2. L’elemento è un elemento del modulo con type="hidden".
3. I valori height e width dell’elemento sono impostati esplicitamente a 0.
4. L’elemento genitore è nascosto.

Quindi, gli elementi con proprietà CSS visibility impostata su hidden o proprietà opacity su 0 sono considerati visibili in jQuery poiché consumano ancora spazio nel DOM.

In alternativa, per controllare la specifica proprietà CSS dell’elemento per verificare se è nascosta, possiamo utilizzare il seguente metodo.

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

Suggerimenti rapidi per verificare se un elemento è nascosto

jQuery non può trarre vantaggio dal metodo DOM nativo querySelectorAll(). Crea anche alcuni problemi di prestazioni poiché costringe il browser a rieseguire il rendering della pagina per determinarne la visibilità. Quindi, invece di usare gli elementi, puoi usare classi o selettori CSS e poi usare .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>

Qui è possibile accedere direttamente a hiddenHeadings e utilizzarlo.