Apa Itu Descendant Pada JQuery

Bila sebelumnya kita telah mempelajari tentang konsep apa yang dimaksud ancestor pada JQuery, maka ada istilah lain yang berlawanan dengan elemen ancestor, yakni elemen descendant. Jadi apa itu descendant pada JQuery ?.

Bila elemen ancestor merujuk pada elemen yang menjadi Parent bagi elemen yang saat ini berstatus sebagai elemen acuan, maka elemen descendant merujuk pada elemen yang menjadi elemen anak dari elemen acuan.

Misal kita memiliki elemen dengan struktur :

div > ul > li > span

Dan yang kita jadikan sebagai elemen trigger adalah elemen <ul>, maka elemen – elemen descendant – nya adalah elemen <li>, dan <span>.

Mendapatkan child elemen dengan method children().

Jika kita ingin menyeleksi suatu elemen yang berada di dalam elemen lain, maka kita dapat menggunakan method children(). Namun elemen yang di seleksi hanyalah child elemen level 1 dari struktur elemen yang ada. Contoh, ada sebuah struktur elemen seperti ini :

div > ul > li > span

Dan yang dijadikan elemen trigger adalah elemen <ul>, maka dengan method children, elemen yang akan terseleksi sebagai elemen child adalah elemen <li> dan yang setingkat dengannya.

Output :

apa itu descendant pada jquery

Live Preview :

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

Dapat anda perhatikan dari output di atas, dimana pada elemen <li> (father) merupakan child dari elemen <ul> (Grandparent).

Namun anda juga dapat memfilter elemen – elemen child ini, yakni elemen child mana yang ingin anda seleksi, caranya anda harus membedakan elemen  child ini dari yang satu dengan yang lainnya. Misal dengan menambahkan class yang berbeda – beda pada  masing – masing elemen.

Dari source code di atas, dapat anda temui dimana saya memberikan class yang berbeda – beda pada setiap elemen <li>, yakni class satu dan dua.

Dan gambar di bawah ini adalah outputnya bila anda klik button <ul> parent, dimana yang saya seleksi adalah elemen <li> dengan class dua.

fungsi method children pada jquery

Live Preview :

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


Mendapatkan elemen child dengan method find()

Selain menggunakan method children(), anda juga dapat menggunakan method find() untuk memilih elemen child. Kedua method ini memiliki perbedaan, dimana bila pada method children(), anda hanya dapat memilih elemen child level 1 saja, namun bila menggunakan method find() anda dapat memilih elemen child sampai pada elemen descendant yang terakhir dalam struktur elemen.

Contoh saya memiliki struktur elemen seperti ini :

div > ul > li > span

Dan yang saya jadikan elemen trigger adalah elemen <ul>, maka bila saya menggunakan method find() saya dapat menentukan secara bebas elemen child yang saya inginkan dan tidak sebatas hanya pada elemen child level 1 saja.

Misal dalam hal ini saya memilih elemen <span>, maka penulisan methodnya adalah seperti ini : find(‘span’).

Perhatikan contoh source code di bawah ini, dimana saya memilih elemen child level terakhir.

Dan gambar di bawah ini adalah outputnya, apabila button <ul> parent sudah di klik :

fungsi method find pada jquery


Demikian tutorial dari Apa Itu Descendant Pada JQuery.

Dan jika ada pertanyaan, silahkan kirim komentar.

Leave a comment

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

× Contact Us