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:
$(':visible');
Esempio
Al click su un pulsante, mostriamo i quadratini invisibili. Quando si clicca sui quadratini "visibili" il loro sfondo cambierà in giallo:
<button id="show">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;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
