Dengan jQuery kita bisa melintasi ke samping di DOM tree untuk menemukan saudara dari sebuah elemen.
Siblings berbagi parent yang sama.
Section Artikel
Melintasi Ke Samping DOM Tree
Ada banyak metode jQuery yang berguna untuk melintasi ke samping di DOM tree:
siblings()next()nextAll()nextUntil()prev()prevAll()prevUntil()
Metode jQuery siblings()
Metode siblings() berfungsi untuk mengembalikan semua elemen siblings dari elemen yang dipilih.
Contoh berikut mengembalikan semua elemen siblings dari <h2> :
Contoh :
<!DOCTYPE html> <html> <head> <style> .siblings * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("h2").siblings().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body class="siblings"> <div>div (parent) <p>p</p> <span>span</span> <h2>h2</h2> <h3>h3</h3> <p>p</p> </div> </body> </html>
Kita juga bisa menggunakan parameter opsional untuk memfilter pencarian siblings.
Contoh berikut mengembalikan semua elemen siblings dari <h2> yang merupakan <p> elemen
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
Metode jQuery next()
Metode next() mengembalikan elemen siblings berikutnya dari elemen yang dipilih.
Contoh berikut mengembalikan siblings berikutnya dari <h2> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").next().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
Metode jQuery nextAll()
Metode nextAll() mengembalikan semua elemen siblings berikutnya dari elemen yang dipilih.
Contoh berikut mengembalikan semua elemen siblings berikutnya dari <h2> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
Metode jQuery nextUntil()
Metode nextUntil() mengembalikan semua elemen sibling berikutnya di antara dua argumen yang diberikan.
Contoh berikut mengembalikan semua elemen siblings antara elemen <h2> dan <h6> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.siblings * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (parent)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>
</html>
Metode jQuery prev (), prevAll () & prevUntil ()
Metode prev(), prevAll() dan prevUntil() bekerja seperti metode di atas tetapi dengan fungsionalitas terbalik: mereka mengembalikan elemen siblings sebelumnya (melintasi mundur sepanjang elemen siblings dalam DOM tree, bukan meneruskan).
