Verificare se un elemento è visibile con jQuery

Utilizzando la funzione .is() messa a disposizione da jQuery possiamo facilmente effettuare dei controlli su un elemento che ci interessa per sapere se è visibile o meno in quel momento.

Verificare se un elemento è visibile

Nell’HTML seguente nascondiamo il div in considerazione usando del CSS in linea (pratica tendenzialmente sconsigliata, in questo caso ci risulta comodo utilizzarla a titolo d’esempio).

<div id="test" style="display:none"></div>

Per verificare se il div è visible oppure no tramite jQuery dobbiamo usare la funzione .is() passando :visible come parametro:

if( $('#test').is(':visible') ) {
    // se #test è visibile fai qualcosa
}
else {
    // se non è visibile fai qualcos'altro
}

Verificare se un elemento è nascosto/invisibile

La procedura da utilizzare è la stessa, tuttavia il parametro da passare sarà :hidden:

if( $('#test').is(':hidden') ) {
    // se #test è invisibile fai qualcosa
}
else {
    // se invece è visibile fai qualcos'altro
}

Nota: se un elemento non occupa alcuno spazio nel documento, is(‘hidden’) darà come risultato “vero” anche se l’elemento è realmente visibili. E’ quindi più consigliato utilizzare la seguente sintassi:

if( !$('#test').is(':visible') ) {
    // se #test è diverso da visibile fai qualcosa
}
else {
    // altrimenti fai qualcos'altro
}

Loop attraverso elementi visibili

Prendiamo questo html come base:

<div id="test">
    <div>Ciao mondo</div>
    <div style="display:none">non mi vedi</div>
    <div>evviva</div>
</div>

Per effettuare un loop dentro tutti gli elementi visibili contenuti in #test dovremo scrivere:

$("#test div:visible").each( function() {
    document.write($(this).html()+'
');
});

Che dice: per ogni div visibile discendente di #test stampami il loro contenuto.
Il risultato sarà:

Ciao mondo
evviva

E di nuovo, è possibile considerare l’elemento invisibile utilizzato la logica inversa proposta nell’esempio precedente! Questo è quanto 😉