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

Seleksi dengan banyak Traversing

Ditanyakan pada tanggal 29 April 2020 oleh Pramadhio Ari Putro Edit  Hapus  Buka Kembali  Tandai 

Dengan code ini :

<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>Aksi</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>          
$(document).ready(function() {
    $("button").click(function(){
        $("li").first().next().last().css("background-color", "blue");
    });
});

</script>

kenapa yang berubah warna hanya Jakarta dan bukan France, padahal di situ ada .last()?

1 JAWABAN / 2 KOMENTAR

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

Ini dikarenakan dia mengambil DOM last, dari hasil next. Coba jalankan next dulu, semua elemen setelah first kena imbasnya. Lalu chaining last ini kan dipanggil setelah next dulu, maka dia akan mengambil last dari hasil next (elemen pertama dari hasil next yaitu Jakarta). Bukan last france (dalam keadaan normal).

OOT : Nah yang menarik disini, ketika kita jalankan hanya method last, tanpa chaining, terjadi error. Ini dikarenakan selector li tidak bisa mendeteksi lastnya dari dom karena gak ada patokan. Sehingga kita harus ambil dari sudut pandang orangtua/parentnya, yaitu id destinations. Seperti ini :

<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>Run!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>          
$(document).ready(function() {
    $("button").click(function(){

        $("li").first().next().last().css("background-color", "blue");

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

</script>