Apa Itu Traversing Pada JQuery

Dalam tutorial kali ini kita akan membahas tentang apa itu traversing pada JQuery. Dalam  bahasa Inggris Traversing berarti garis lintang/lintas. Yang dimaksud disini adalah garis lintang suatu keturunan seperti kakek, ayah, anak, dan saudara kandung. Perhatikan ilustrasi di bawah ini :

apa itu traversing pada jquery

Penjelasan dari contoh di atas :

  1. Hasan, berada di tingkat pertama dimana dia adalah Ayah dari Jayadi dan Darsono, Kakek dari Burhan dan Annisa, dan Buyut dari Bowo. Anggap Hasan adalah elemen, maka Hasan bisa disebut sebagai Parent elemen tersebut.
  2. Lalu Jayadi dan Darsono berada di tingkat kedua (setingkat), dimana Jayadi adalah saudara kandung dari Darsono (sibling). Lalu, Jayadi adalah Anak (child) dari Hasan, Ayah dari Burhan dan Annisa, dan Kakek dari Bowo.
  3. Selanjutnya Burhan dan Annisa berada pada tingkat ketiga (setingkat), karena mereka adalah saudara kandung (sibling). Burhan juga merupakan Cucu Hasan, Anak Jayadi, dan Ayah dari Bowo.
  4. Terakhir Bowo yang berada pada tingkat ke empat adalah Cicit (di bawah cucu) dari Hasan, Cucu dari Jayadi, dan Anak dari Burhan.

JQuery Traversing adalah metode yang merujuk pada posisi elemen dalam halaman website, apakah sebagai parent / child bagi elemen lain. Metode ini digunakan untuk memilih / menemukan elemen HTML berdasarkan hubungan mereka dengan elemen lainnya. Seperti Elemen div adalah ( parent ) dari elemen p ( div > p ), atau elemen ul adalah anak / ( child ) dari elemen span ( span > ul ), dan elemen li pertama apakah setingkat / saudara kandung (sibling) dengan elemen li kedua ( li li ).

Gambar di atas mengilustrasikan pohon keluarga dengan JQuery Traversing. Kalian dapat bergerak dengan mudah ke atas (buyut / kakek), ke keturunannya (anak/cucu/cicit). Atau ke samping (saudara kandung), dimana terlebih dulu anda harus menentukan elemen yang akan dijadikan sebagai trigger / acuan.

Dari penjelasan di atas

  1. Anchestor adalah parent (nenek moyang, buyut, kakek, ayah).
  2. Descendant adalah child (anak, cucu, cicit).
  3. Siblings adalah saudara kandung / setara.

Perhatikan contoh di bawah ini, agar apa yang di jelaskan pada materi di atas, tergambarkan dengan jelas.

Misal kita memiliki sebuah elemen <span> di dalam elemen <li>, dan elemen <li> ini berada di dalam elemen <ul>, dan juga elemen <ul> ini berada di dalam elemen <div>. Jadi struktur elemennya adalah seperti ini : div > ul > li > span. Dan kita hanya akan berfokus pada elemen <li>. Perhatikan gambar di bawah ini :

traversing pada jquery

Karena kita hanya akan berfokus pada elemen <li>, adakalanya dimana seorang Developer ingin memberikan class tambahan untuk Class parent, sedangkan parent bagi elemen <li> adalah elemen <ul>, maka kita bisa menggunakan method parent() untuk memilihnya. Melalui contoh berikut, saya berikan gambaran dimana saya merubah elemen parent memiliki border berwarna hitam.

Berikut outputnya :

fungsi traversing pada jquery

Live Preview :

See the Pen
Traversing Pada JQuery
by Lautankode (@lautankode)
on CodePen.

Itulah fungsi dari konsep Traversing yang diberikan JQuery. Dan untuk memilih elemen – elemen lain, anda hanya perlu mengganti methodnya saja. Pertama – tama, tentukan dulu elemen mana yang ingin anda jadikan sebagai acuannya, kemudian baru tentukan level traversingnya, jika yang ingin anda pilih adalah parentnya, anda dapat menggunakan method parent(), namun jika anda ingin memilih elemen di bawahnya, anda dapat menggunakan method child().


Demikian tutorial dari apa itu traversing pada jquery. apa itu traversing pada jquery

Dan jika ada pertanyaan lebih lanjut, silahkan isi kolom komentar di bawah ini.

Leave a comment

Your email address will not be published. Required fields are marked *

× Contact Us