Cara Memeriksa Apakah Elemen Terlihat dengan jQuery

Mengecek visibilitas elemen dipakai untuk logika toggle, misalnya menentukan apakah panel perlu dibuka atau ditutup. Artikel ini membahas cara memeriksa apakah elemen terlihat dengan jQuery.

Selektor :visible dan :hidden

<script>
if ($("#panel").is(":visible")) {
    console.log("Sedang terlihat");
}
</script>

Contoh Kasus: Toggle Bersyarat

<script>
$("#tombol").click(function() {
    const panel = $("#panel");
    if (panel.is(":hidden")) {
        panel.slideDown();
        $(this).text("Sembunyikan");
    } else {
        panel.slideUp();
        $(this).text("Tampilkan");
    }
});
</script>

Menghitung Elemen yang Terlihat

<script>
const jumlah = $(".item:visible").length; // hanya yang terlihat
</script>

Berguna misalnya untuk menghitung berapa hasil yang tampil setelah filter.

Kesimpulan

Gunakan .is(":visible") atau .is(":hidden") untuk mengecek visibilitas sebelum menjalankan aksi tampil/sembunyi. Selektor :visible juga berguna untuk menghitung elemen yang sedang tampil.

Referensi: untuk penjelasan lebih mendalam, kunjungi dokumentasi resmi jQuery (api.jquery.com).

Baca Juga

Ali Akbar

Software Developer yang fokus mengembangkan aplikasi berbasis Web dan Desktop. Senang mempelajari teknologi baru terutama di bidang web design dan web development.

View all posts by Ali Akbar →

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *