In questo articolo scopriremo assieme come è possibile verificare se un elemento all’interno di una pagina web è nascosto grazie a jQuery.
In jQuery è possibile attivare, nascondere oppure mostrare un elemento HTML tramite i selettori legati alla classe, all’id o alla tipologia di tag. Ma come è possibile verificare se un elemento particolare della tua pagina web è nascosto oppure no?
Ciao mi chiamo Lorenzo Neri e sono un informatico: realizzo contenuti per aiutare le persone a padroneggiare l’arte del nuovo millennio, ovvero l’informatica!
Parrebbe che in jQuery non ci sia un metodo specifico per verificarlo. Quelli che abbiamo visto prima impostano l’elemento ma non permettono di verificare in che stato sia.
Perciò, dobbiamo ricorrere a degli escamotage un po’ insoliti, ma facili da capire!
Come verificare con jQuery se un elemento ha un particolare attributo CSS
Il metodo che sto per mostrarti non funziona solo per il nostro scopo, ovvero verificare se un elemento è nascosto, ma jQuery offre un metodo che funziona molto bene anche per altro.
Questo metodo, si chiama “is”:
$(elementoDaControllare).is(":stato");
Il famoso selettore “$” di jQuery vuole come argomento principale l’elemento che siamo intenzionati a verificare.
In altre parole, come dicevo prima, può essere un tag, un ID in particolare, oppure una certa classe CSS.
Ma soffermiamoci sull’argomento del metodo “is”. Avrai notato che dopo i due punti, vuole lo stato.
Per stato, intendiamo lo stato di visualizzazione dell’elemento HTML che vogliamo verificare a livello di CSS!
Perciò, come verificare se l’elemento è nascosto? Semplice:
$(elementoDaControllare).is(":hidden");
Se l’elemento risulta nascosto in termini di CSS, questo metodo ritornerà “true”, diversamente “false”.
Naturalmente esiste anche la controparte, ovvero verifica se l’elemento è visibile:
$(elementoDaControllare).is(":visible");
Che ovviamente ritornerà “true” se l’elemento è visibile, “false” se non lo è.
Questi due metodi servono ovviamente se devi verificare un elemento ben specifico.
Ma se invece volessi trovare tutti gli elementi nascosti o visibili all’interno di una pagina?
Come trovare tutti gli elementi nascosti in una pagina web con jQuery
Esiste una strada differente che permette di salvare in una variabile tutti gli elementi che hanno un determinato stato di visualizzazione CSS:
$("elementiDaControllare:stato");
In questo caso, come prima parte della stringa è bene rifarsi a una certa classe CSS oppure tag HTML.
Nella seconda parte della stringa, dopo i due punti, possiamo specificare lo stato come abbiamo visto prima.
Quindi, per fare un esempio e concludere l’articolo, per trovare tutti gli elementi nascosti che hanno la classe CSS “sfondoRosso” per esempio:
var elementiNascosti_sfondoRosso = $('.sfondoRosso:hidden');
