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 :
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 :
- Siblings()
- Next()
- nextAll()
- nextUntil()
- prev(()
- prevAll()
- 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 :
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 :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="satu"> li ( Father ) </li> <li class="dua"> li ( Father ) </li> <li class="tiga"> li ( Father ) </li> <li class="empat"> li ( Father ) </li> <li class="lima"> li ( Father ) </li> <li class="enam"> li ( Father ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li').siblings().css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Di bawah ini adalah outputnya, bila anda klik tombol <li> 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.
Berikut source code – nya :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.satu').next().css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Dan di bawah ini adalah outputnya :
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.
Berikut contoh source – codenya :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.satu').nextAll().css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Dan di bawah ini adalah hasilnya :
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.
Maka penulisan code nya mulai dari elemen <li class=”1″> sampai dengan <li class=”4″>.
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.satu').nextUntil('li.empat').css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Output :
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.
Berikut contoh source code – nya :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.tiga').prev().css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Dan di bawah ini adalah outputnya :
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.
Contoh source code :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.tiga').prevAll().css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Dan di bawah ini adalah outputnya :
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.
Di bawah ini contoh source code – nya :
<!DOCTYPE html> <html> <head> <style> div{ width: 90%; } div, ul, li, span{ margin: 15px; padding: 15px; } div * { display: block; } div{ border: 1.5px solid #c2c2c2; } ul{ border: 1.5px solid #c2c2c2; list-style-type: none; } li{ border: 1.5px solid #c2c2c2; } span{ border: 1.5px solid #c2c2c2; } </style> <script src="//code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div>div ( Great Grandparent ) <ul> ul ( Grandparent ) <li class="nol"> li ( Father ) ( nol ) </li> <li class="satu"> li ( Father ) ( satu ) </li> <li class="dua"> li ( Father ) ( dua ) </li> <li class="tiga"> li ( Father ) ( tiga ) </li> <li class="empat"> li ( Father ) ( empat ) </li> <li class="lima"> li ( Father ) ( lima ) </li> </ul> </div> <button class="li"><li> siblings</button> <button class="refresh">Refresh</button> <script> $(function(){ $('button.li').click(function(){ $('li.empat').prevUntil('li.nol').css('border-color', '#000000'); }); $('button.refresh').click(function(){ $('div, ul, li, span').css('border-color', '#c2c2c2'); }); }); </script> </body> </html>Dan di bawah ini adalah outputnya, apabila anda klik button <li> siblings :
Live Preview :
See the Pen
Method prevUntil pada jquery by Lautankode (@lautankode)
on CodePen.
Demikian tutorial dari Konsep Sibling Pada JQuery.