waktu tersisa untuk klaim Potongan harga Rp 300.000 dalam program Membership. Klaim Promo!

Traversing first() kenapa tidak berfungsi?

Ditanyakan pada tanggal 8 June 2020 oleh Rini Gusniarni Edit  Hapus  Tandai Selesai  Tandai 

Saya mau menandai baris pertama, berikutnya dan yg terakhir, kenapa baris pertama tidak berubah ya?

<!DOCTYPE html>
<html>
<title>Belajar jQuery</title>
<body>
    <ul id="destinations">
        <li>Bandung</li>
        <li>Jakarta
            <ul>
                <li>Jakarta Pusat</li>
                <li>Jakarta Utara</li>
                <li>Jakarta Selatan</li>
                <li>Jakarta Barat</li>
                <li class="promo">Jakarta Timur</li>
            </ul>
        </li>
        <li>Surabaya</li>
        <li>Bali</li>
        <li id="france">France</li>
    </ul>
    <button>Beraksi</button>

    <!--load file jquery-->
    <script src="jquery-3.5.1.min.js"></script>

    <script>          
        $(document).ready(function() {
            $("button").click(function(){
                $("li") .first() .next() .css("background-color", "blue");

                // last, gak bisa pakai li saja, sudut pandang harus dari parent dulu.
                $("#destinations") .children() .last() .css("background-color", "blue");
            });
        });
    </script>
</body>
</html>
Comment ..

Blok semua kode, lalu tekan tombol tab supaya kodenya tidak di render oleh browser jadi keliatan

Dikomentari pada tanggal 8 June 2020 oleh Bagus Aji Santoso Edit  Remove 
BUAT KOMENTAR

1 JAWABAN / 1 KOMENTAR

User avatar
Oriza Sahputra menjawab pada tanggal 10 June 2020 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

Rantai/chaining method next menyebabkan selector berubah ke sesudah first, sehingga first tidak tertunjuk lagi kak. Paling kalau mau panggil method dua kali seperti ini :

<!DOCTYPE html>
<html>
<title>Belajar jQuery</title>
<body>
    <ul id="destinations">
        <li>Bandung</li>
        <li>Jakarta
            <ul>
                <li>Jakarta Pusat</li>
                <li>Jakarta Utara</li>
                <li>Jakarta Selatan</li>
                <li>Jakarta Barat</li>
                <li class="promo">Jakarta Timur</li>
            </ul>
        </li>
        <li>Surabaya</li>
        <li>Bali</li>
        <li id="france">France</li>
    </ul>

    <button>Beraksi</button>

    <!-- Load file Jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

    <script>          
        $(document).ready(function() {
            $("button").click(function(){
                $("li").first().css("background-color", "blue");
                $("li").first().next().css("background-color", "blue");

                // Last, gak bisa pakai li saja, sudut pandang harus dari parent dulu.
                $("#destinations").children().last().css("background-color", "blue");
            });
        });
    </script>
</body>
</html>
BUAT KOMENTAR