Selettore hidden
Il selettore :hidden seleziona tutti gli elementi sulla
pagina che sono nascosti.
Gli elementi con visibility: hidden o con
opacity: 0 sono considerati visibili, poiché occupano
spazio nel layout. Gli elementi possono essere considerati non visibili
per diversi motivi: il valore della proprietà css
display è none, oppure sono elementi con
l'attributo type="hidden",
o la loro altezza o larghezza sono impostate a 0,
oppure il loro elemento genitore è nascosto.
Poiché :hidden non fa parte delle specifiche CSS,
per migliorare le prestazioni nei browser moderni
è meglio filtrare prima gli elementi con
l'uso di un selettore css puro, e poi
applicare .filter(':hidden').
Tenere traccia della visibilità degli elementi con altri
metodi, ad esempio con una classe, può
garantire prestazioni migliori.
Sintassi
Ecco come selezioniamo gli elementi nascosti:
$(':hidden');
Esempio
Al click sul pulsante #test
mostriamo i quadratini invisibili:
<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});
