Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo

traversing

Ditanyakan pada tanggal 12 January 2020 oleh Fauzi Ramdhani

fungsi traversing : kak mau tanya fungsi di traversing itu gimana ya penulisannya saya nyoba nulis sesuai dengan yg d ilustrasikan tp ga ada pengaruh apa2 :

$("li").first().next().prev().last(); bisa di berikan contoh penulisannya ga kak untuk smw elementnya yg di traversing

2 JAWABAN / 0 KOMENTAR

User avatar
Ahmad Oriza menjawab pada tanggal 13 January 2020

Hai kak,

Tentunya pada layar tidak akan tampil apa apa karena select method tersebut fungsinya hanyalah memilih elemen. Tidak akan terjadi apa apa sampai kita perintahkan untuk mengubah style nya.

Pada dunia nyatanya kita hanya memanggil beberapa perintah traversing saja, tidak sebanyak di sample. Contoh real begini, misal kita punya sebuah list.

<ul> Tun
 <li>Jawa</li>
 <li>Sumatra</li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
$(document).ready(function(){
    // Tanpa next maka akan memilih elemen paling pertama
    $('li').css('background', 'green');

  // Dengan next, dari elemen pertama maju satu langkah.
    $('li').next().css('background', 'yellow');
})
</script>

Kalau tidak pakai next akan menunjuk element list paling pertama kemudian kita perintahkan untuk menghijaukan. Dengan next, maka maju satu langkah kemudian kita berikan warna kuning.

Hasilnya seperti ini :

Begitulah cara kerjanya, untuk menunjuk element yang kita ingin olah. Tunjuk dulu elemen yang ingin diolah dengan perintah $('li') menunjuk html li. Lalu traversing.

User avatar
I Wayan Ryan Saputra menjawab pada tanggal 12 January 2020
Mungkin source ini bisa jadi referensi :
)
<body>
    <h1>Belajar Travesing</h1>
    <ul id="destination">
        <li>Pertama</li>
        <li>Kedua</li>
        <ul>
            <li>Pertama dari kedua</li>
            <li>Kedua dari kedua</li>
        </ul>
        <li>Ketiga</li>
        <li>Keempat</li>
        <li>Kelima</li>
    </ul>
    <button>Aksi dari code JS</button>
    <!-- INGAT TAMBAHKAN INI -->
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script>

        // Jangan lupa titik koma
        $(document).ready(function () {
            $("button").click(function () {

                // tinggal ganti atau hapus traversingnya
                // contoh hilangkan .PREV atau .FIRST atau .NEXT dan lihat hasilnya
                $("#destination li").first().next().prev().last()
                                .css({
                    "background-color": "green",
                    "font-size": "28px",
                    "color": "white"
                });

            });
        });
        // Thank You.
        // Salam Belajar bareng
        // Saya juga lagi belajar
        // :)
    </script>
</body>