Selektor visible
Selektor :visible memilih semua elemen yang terlihat
pada halaman.
Elemen dengan visibility: hidden atau dengan
opacity: 0 dianggap terlihat, karena masih menempati
ruang dalam tata letak.
Elemen dianggap terlihat jika mereka menempati
ruang dalam dokumen. Elemen yang terlihat memiliki tinggi
dan lebar yang berbeda dari 0.
Karena :visible tidak termasuk dalam spesifikasi CSS,
maka untuk meningkatkan kinerja di browser modern
sebaiknya pertama-tama saring elemen dengan
menggunakan selektor css murni, lalu kemudian
terapkan .filter(':visible').
Melacak visibilitas elemen menggunakan metode
lainnya, misalnya, dengan kelas, dapat
menjamin kinerja yang lebih baik.
Sintaks
Beginilah cara kita memilih elemen yang terlihat:
$(':visible');
Contoh
Mari kita tunjukkan kotak-kotak yang tidak terlihat saat tombol diklik. Saat menekan kotak-kotak "terlihat", latar belakangnya akan berubah menjadi kuning:
<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');
});
