Selettore visible

Il selettore :visible seleziona tutti gli elementi visibili sulla pagina. Gli elementi con visibility: hidden o con opacity: 0 sono considerati visibili, poiché occupano spazio nel layout. Gli elementi sono considerati visibili se occupano spazio nel documento. Gli elementi visibili hanno un'altezza e una larghezza diverse da 0. Poiché :visible 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(':visible'). Il monitoraggio della visibilità degli elementi con altri metodi, ad esempio, con una classe, può garantire prestazioni migliori.

Sintassi

In questo modo selezioniamo gli elementi visibili:

javascript$(':visible');

Esempio

Al click su un pulsante, mostriamo i quadratini invisibili. Quando si clicca sui quadratini "visibili" il loro sfondo cambierà in giallo:

html<button id="show">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$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

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

Vedi anche