Metode next & nextAll di jQuery

Metode next & nextAll di jQuery - Pembahasan artikel dumetschool kali ini adalah tentang metode next, dan nextAll yang terdapat pada jQuery. Metode ini merupakan bagian dari konsep traversing sibling pada jQuery dimana sibling mempunyai banyak metode yang bisa kita gunakan untuk memilih suatu elemen.

  1. next() : merupakan metode yang bisa kita gunakan untuk memilih datu elemen selanjutnya dari elemen yang telah kita tentukan.
  2. nextAll() : merupakan metode yang bisa kita gunakan untuk memilih semua elemen selanjutnya dari elemen yang telah ditentukan.

Untuk lebih jelas dan lebih mudah dipahami saya akan berikan contoh penggunaan agar teman - teman bisa dengan mudah membedakan dan memahami fungsinya.

1. next()

Silahkan kalian bisa ketikan kode berikut untuk penggunaan metode next pada elemen list.

<body>
    <ul>
        <li>Mangga</li>
        <li id="buah">Anggur</li>
        <li>Semangka</li>
        <li>Apel</li>
        <li>Rambutan</li>
    </ul>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $("#buah").next().css({
        background: 'salmon',
        padding: '10px'
    });
</script>

Dari kode diatas, artinya kita memilih satu elemen setelah elemen list yang telah kita tentukan yaitu satu elemen setelah id buah.

2. nextAll()

Berikutnya adalah contoh penggunaan metode nextAll() pada elemen list.

<body>
    <ul>
        <li>Mangga</li>
        <li id="buah">Anggur</li>
        <li>Semangka</li>
        <li>Apel</li>
        <li>Rambutan</li>
    </ul>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $("#buah").nextAll().css({
        background: 'darkcyan',
        padding: '10px',
        marginTop: '5px'
    });
</script>

Dari kode diatas, artinya kita memilih semua elemen setelah elemen yang telah ditentukan yaitu memilih elemen setelah id buah.

Bagaimana, bisa dipahami yah teman - teman untuk metode next, dan nextAll dan cara penggunaannya. Semoga pembahasan Metode next & nextAll di jQuery ini bermanfaat, sampai jumpa lagi dipembahasan selanjutnya :)

20 Oktober 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat