Apa Yang Dimaksud Ancestor Pada JQuery

Dalam tutorial kali ini kita akan membahas tentang apa yang dimaksud ancestor pada JQuery dan bagaimana cara penerapannya.

Anchestor adalah elemen – elemen yang menjadi parent dari elemen yang menjadi acuan. Perhatikan gambar di bawah ini :

apa yang dimaksud ancestor pada jquery

Ada 3 method umum yang digunakan dalam JQuery Traversing ini dalam hal Anchestor, yakni parent(), parents(), dan parentsUntil(). Perhatikan penjelasan yang akan saya berikan di bawah ini. Saya pun akan menggunakan contoh dari gambar di atas, dan elemen yang saya jadikan acuan adalah elemen <li> (anak).

  1. Method parent(), akan merujuk pada parent level 1 dari elemen <li>, yakni elemen <ul>.
  2. Method parents(), akan merujuk pada semua parent dari elemen <li>, yakni elemen <ul>, <div>, <body>.
  3. Method parentsUntil(), akan merujuk pada elemen parent yang ditentukan sendiri oleh Developer, artinya kita dapat menentukan akan berakhir sampai elemen parent yang ke berapa.

Fungsi method parent() pada JQuery

Jika anda hanya ingin menyeleksi elemen parent yang berada 1 level dari elemen child yang menjadi elemen acuannya, anda dapat menggunakan method parent(). Contoh :

Dan gambar di bawah ini adalah hasilnya, dimana anda dapat mengklik setiap button untuk tahu, parent dari masing – masing elemen.

fungsi method parent pada jquery

Live Preview :

See the Pen
Fungsi method parent pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen parent dengan method parents()

Sedangkan method parents() akan menyeleksi semua elemen yang menjadi ancestor dari elemen yang menjadi elemen acuan, yakni elemen ayah, kakek, buyut, dan semua elemen – elemen yang merangkum elemen acuan ini sampai pada elemen root <html>.

Contoh, terdapat sebuah struktur elemen seperti ini :

html > body > div > ul > li > span.

Dan yang kita jadikan sebagai elemen acuan adalah elemen <li>, maka jika kita menggunakan method parents(), elemen – elemen yang akan terseleksi adalah <html>, <body>, <div>, dan <ul>. Perhatikan contoh source code di bawah ini :

Dan di bawah ini adalah hasilnya :

fungsi method parents pada jquery

Live Preview :

See the Pen
Fungsi Method Parents Pada JQuery
by Lautankode (@lautankode)
on CodePen.


Mendapatkan elemen parent dengan method parentsUntil()

Terakhir adalah method parentsUntil(), bila pada method ini, anda dapat menentukan sendiri elemen parent – nya dari elemen child yang menjadi acuannya. Namun dalam method ini anda juga harus menentukan sendiri elemen parentnya. Misal ada sebuah struktur elemen seperti ini :

div > ul > li > span

Lalu yang menjadi elemen acuan adalah elemen <span>, sedangkan batasan parent yang ingin saya buat hanya sampai elemen <div>, maka elemen yang terseleksi sebagai parent hanyalah elemen <ul> dan <li>, dan penulisan source code – nya adalah seperti ini :

Dan gambar di bawah ini adalah hasilnya ketika button <span> di klik :

fungsi method parensuntil pada jquery

Live Preview :

See the Pen
Fungsi method parenstuntil pada JQuery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Apa Yang Dimaksud Ancestor Pada JQuery.

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

Leave a comment

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

× Contact Us