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:

javascript$(':visible');

Contoh

Mari kita tunjukkan kotak-kotak yang tidak terlihat saat tombol diklik. Saat menekan kotak-kotak "terlihat", latar belakangnya akan berubah menjadi kuning:

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');
});

Lihat juga