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:

javascript$(':hidden');

Esempio

Al click sul pulsante #test mostriamo i quadratini invisibili:

html<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('#test').click(function() {
  $('div:hidden').show('slow');
});

Vedi anche