Visible-valitsin
Valitsin :visible valitsee kaikki näkyvät
elementit sivulla.
Elementit, joilla on visibility: hidden tai
opacity: 0, katsotaan näkyviksi, koska ne vievät
tilaa asettelussa.
Elementit katsotaan näkyviksi, jos ne vievät
tilaa asiakirjassa. Näkyvillä elementeillä on korkeus
ja leveys, jotka eivät ole 0.
Koska :visible ei kuulu CSS-spesifikaatioon,
nykyaikaisissa selaimissa on suorituskyvyn parantamiseksi
parempi suodattaa elementit aluksi
käyttämällä puhdasta css-valitsinta ja sitten
käyttää .filter(':visible').
Elementtien näkyvyyden seuraaminen muilla
tavoilla, esimerkiksi luokan avulla, voi
tarjota paremman suorituskyvyn.
Syntaksi
Näin valitsemme näkyvät elementit:
$(':visible');
Esimerkki
Näytetäänpainiketta napsauttamalla näkymättömät neliöt. Kun "näkyviä" neliöitä napsautetaan, niiden tausta muuttuu keltaiseksi:
<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');
});
