Dengan jQuery kita bisa melintasi DOM tree untuk menemukan descendants dari sebuah elemen.
Descendant adalah child, grandchild, great-grandchild dan lain sebagainya.
Melintasi DOM tree
Dua metode jQuery yang berguna untuk menelusuri pohon DOM adalah:
children()find()
Metode jQuery children()
Metode children() mengembalikan semua descendants langsung dari elemen yang dipilih.
Metode ini hanya melintasi satu tingkat di bawah pohon DOM.
Contoh berikut mengembalikan semua elemen yang merupakan descendants langsung dari setiap elemen <div> :
Contoh :
<!DOCTYPE html> <html> <head> <style> .descendants * { 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(){ $("div").children().css({"color": "red", "border": "2px solid red"}); }); </script> </head> <body> <div class="descendants" style="width:500px;">div (elemen saat ini) <p>p (child) <span>span (grandchild)</span> </p> <p>p (child) <span>span (grandchild)</span> </p> </div> </body> </html>
Kita juga bisa menggunakan parameter opsional untuk memfilter pencarian children.
Contoh berikut mengembalikan semua <p> elemen dengan nama kelas “first”, yang merupakan descendants langsung dari <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
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(){
$("div").children("p.first").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (element saat ini)
<p class="first">p (child)
<span>span (grandchild)</span>
</p>
<p class="second">p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
Metode jQuery find()
Metode find() mengembalikan elemen descendats dari elemen yang dipilih, hingga ke descendants terakhir.
Contoh berikut mengembalikan semua elemen <span> yang merupakan descendants dari <div>:
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
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(){
$("div").find("span").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (elemen saat ini)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
Contoh berikut mengembalikan semua descendants <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.descendants * {
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(){
$("div").find("*").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (elemen saat ini)
<p>p (child)
<span>span (grandchild)</span>
</p>
<p>p (child)
<span>span (grandchild)</span>
</p>
</div>
</body>
</html>
