Cara Mengambil Indeks Elemen dengan jQuery

Mengetahui posisi elemen di antara elemen sejenisnya berguna untuk tab, slider, atau galeri. Artikel ini membahas cara mengambil indeks elemen dengan jQuery (index).

Metode .index()

<script>
$(".tab").click(function() {
    const posisi = $(this).index();
    console.log("Tab ke-" + posisi);
});
</script>

Metode ini mengembalikan posisi elemen (mulai dari 0) di antara elemen sejenisnya.

Contoh Kasus: Menyinkronkan Tab dengan Konten

<script>
$(".tab").click(function() {
    const i = $(this).index();
    $(".tab").removeClass("aktif");
    $(this).addClass("aktif");
    $(".konten").hide().eq(i).show(); // tampilkan konten ke-i
});
</script>

.eq(i) memilih elemen konten pada indeks yang sama dengan tab yang diklik.

Kesimpulan

Gunakan .index() untuk mengetahui posisi elemen yang diklik, lalu .eq(i) untuk memilih elemen berpasangan pada indeks yang sama. Ini pola inti membuat sistem tab atau galeri.

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 *