Konsep Sibling Pada JQuery

Pada tutorial kali ini akan membahas tentang konsep sibling pada JQuery, dimana pada dasarnya setiap elemen memiliki hubungan ikatan dengan elemen lainnnya.

Dalam JQuery Traversing terdapat istilah elemen ancestor dan juga elemen descendant. Dimana elemen ancestor ini merujuk pada elemen yang menjadi parent bagi elemen trigger (elemen yang menjadi acuannya), sedangkan elemen descendant merujuk pada elemen yang menjadi children bagi elemen trigger.

Namun tidak hanya ada elemen ancestor dan descendant saja, terdapat istilah lain yang merujuk pada elemen yang setingkat dengan elemen trigger ini, elemen ini disebut dengan nama elemen Sibling.

Perhatikan gambar di bawah ini :

konsep sibling pada jquery

Elemen <li> yang saya beri border hitam, adalah elemen – elemen yang selevel, elemen inilah yang disebut memiliki sibling dengan elemen selevel lainnnya.

Dalam konsep traversing siblings ini, jQuery menyediakan setidaknya 7 method yang dapat digunakan untuk menentukan sibling dari elemen trigger, dan tentunya method – method ini memiliki fungsi yang berbeda – beda. Method – method tersebut adalah :

  1. Siblings()
  2. Next()
  3. nextAll()
  4. nextUntil()
  5. prev(()
  6. prevAll()
  7. prevUntil()

Lalu apa saja fungsi dari method – method tersebut, berikut penjelasannya :

Mendapatkan elemen selevel dengan method siblings()

Dengan method siblings() kita dapat menampilkan semua elemen sibling, yakni elemen yang memiliki tingkatan level yang sama dengan elemen yang menjadi triggernya (elemen trigger juga akan terpilih). Misal, terdapat struktur elemen seperti gambar di bawah ini :

apa itu konsep sibling pada jquery

Dapat anda perhatikan melalui gambar di atas, dimana jika menggunakan method siblings() maka semua elemen yang memiliki tingkatan selevel dengan elemen trigger akan terseleksi, termasuk elemen trigger itu sendiri.

Di bawah ini adalah contoh source code – nya :

Di bawah ini adalah outputnya, bila anda klik tombol <li> siblings.

apa itu elemen siblings

Live Preview :

See the Pen
Siblings pada JQuery
by Lautankode (@lautankode)
on CodePen.


Jika menggunakan method siblings() akan menampilkan semua elemen yang selevel dengan elemen yang menjadi trigger, termasuk elemen yang menjadi trigger itu sendiri, maka beda halnya dengan method next(), nextAll(), dan nextUntil.


Fungsi method next(), nextAll(), dan nextUntil() pada JQuery

Method next() hanya akan mengembalikan 1 elemen, yakni elemen selanjutnya dari elemen Trigger. Misal dari contoh gambar di bawah, yang saya jadikan sebagai elemen trigger adalah <li> dengan nomor 1, maka yang terseleksi adalah elemen <li> dengan nomor 2.

fungsi method next pada jquery

Berikut source code – nya :

Dan di bawah ini adalah outputnya :

memilih elemen selanjutnya dengan jquery

Live Preview

See the Pen
Fungsi method next pada jquery
by Lautankode (@lautankode)
on CodePen.


Sedangkan pada method nextAll() akan mengembalikan semua elemen yang menjadi elemen kelanjutan dari elemen yang menjadi trigger – nya. Misal pada gambar di bawah ini, yang menjadi trigger adalah elemen <li> nomor 1, maka elemen <li> nomor 2 – 5 akan terselesi, karena memang method nextAll() akan menyeleksi semua elemen sesudah elemen trigger.

fungsi method nextAll pada jquery

Berikut contoh source – codenya :

Dan di bawah ini adalah hasilnya :

method nextAll pada jquery

Live Preview :

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


Dan terakhir, jika pada method nextUntil(), anda dapat dengan bebas menentukan sendiri elemennya, mulai dari patokan elemen trigger, pemilihan elemen sibling ingin mulai dari mana dan sampai pada elemen ke berapa. Misal pada contoh dari gambar di bawah ini, saya memilih elemen bernomor 1 sebagai elemen trigger, dan ending elemen sibling – nya sampai pada elemen <li> bernomor 3.

method nextuntil pada jquery

Maka penulisan code nya mulai dari elemen <li class=”1″> sampai dengan <li class=”4″>.

Output :

memilih elemen setingkat pada jquery

Live Preview :

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


Fungsi method prev(), prevAll() dan prevUntil() pada JQuery

Jika pada method siblings() akan menyeleksi semua elemen yang memiliki level setingkat dengan elemen trigger, dan jika pada method next(), nextAll(), juga nextUntil() akan menyeleksi elemen selevel sesudah elemen trigger, maka beda halnya dengan method prev(), prevAll(), dan juga prevUntil() dimana kita dapat menyeleksi elemen selevel sebelum elemen yang menjadi elemen trigger. Dan masing – masing method prev ini memiliki fungsinya tersendiri, yakni :

Method prev() dapat anda gunakan untuk memilih elemen sebelumnya dari elemen yang menjadi sibling dari elemen trigger, namun hanya memilih 1 elemen saja. Misal pada gambar di bawah ini, dimana saya memilih elemen <li> nomor 3 sebagai elemen trigger, maka jika saya menggunakan method prev() elemen yang akan terseleksi adalah elemen <li> nomor 2.

memilih elemen sebelumnya pada jquery

Berikut contoh source code – nya :

Dan di bawah ini adalah outputnya :

method prev pada jquery

Live Preview :

See the Pen
Method prev pada jquery
by Lautankode (@lautankode)
on CodePen.


Namun jika pada method prevAll() anda dapat menyeleksi semua elemen sibling, yakni elemen – elemen sebelum elemen trigger. Misal pada gambar di bawah, elemen triggernya adalah <li> bernomor 3, maka elemen yang akan terseleksi adalah elemen – elemen <li> bernomor 0 – 2.

memilih semua elemen sebelumnya pada jquery

Contoh source code :

Dan di bawah ini adalah outputnya :

fungsi method prevall jquery

Live Preview :

See the Pen
Method prevAll pada jquery
by Lautankode (@lautankode)
on CodePen.


Sedangkan pada method prevUntil() anda dapat menentukan sendiri, elemen sibling sebelumnya dari elemen yang menjadi trigger. Mulai dari elemen mana, dan ingin berakhir sampai pada elemen keberapa. Pada gambar di bawah ini saya menentukan yang menjadi elemen trigger adalah elemen <li> bernomor 4, dan saya tentukan pula ending elemennya sampai pada elemen <li> bernomor 0. Maka elemen – elemen yang akan terseleksi adalah elemen <li> bernomor 1 – 3.

membatasi pemilihan elemen sebelumnya pada jquery

Di bawah ini contoh source code – nya :

Dan di bawah ini adalah outputnya, apabila anda klik button <li> siblings :

fungsi prevuntil pada jquery

Live Preview :

See the Pen
Method prevUntil pada jquery
by Lautankode (@lautankode)
on CodePen.


Demikian tutorial dari Konsep Sibling Pada JQuery.

Leave a comment

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

× Contact Us