Jquery

jQuery Traversing : Ancestor – Kode dan Contohnya

Dengan jQuery Traversing kita bisa melintasi DOM tree untuk menemukan ancestor sebuah elemen.

Ancestor adalah parent, grandparent, great-grandparent dan lain sebagainya.

Melintasi DOM tree

Tiga metode jQuery yang berguna untuk melintasi DOM tree adalah:

  • parent()
  • parents()
  • parentsUntil()

Metode jQuery parent()

Metode parent() berfungsi untuk mengembalikan elemen induk langsung dari elemen yang dipilih.

Metode ini hanya melintasi satu level di atas DOM tree.

Contoh berikut mengembalikan elemen induk langsung dari setiap <span> elemen:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  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(){
  $("span").parent().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
      <span>span</span>
    </p> 
  </div>
</div>

</body>
</html>

Metode jQuery parents()

Metode parents() berfungsi untuk mengembalikan semua elemen ancestor dari elemen yang dipilih, hingga ke root elemen dokumen (<html>).

Contoh berikut mengembalikan semua ancestor dari semua <span> elemen:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  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(){
  $("span").parents().css({"color": "red", "border": "2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

<!-- The outer red border, before the body element, is the html element (also an ancestor) -->
</html>

Kita juga bisa menggunakan parameter opsional untuk memfilter pencarian ancestor.

Contoh berikut mengembalikan semua leluhur dari semua <span> elemen yang merupakan elemen <ul>

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  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(){
  $("span").parents("ul").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

Metode jQuery parentUntil()

Metode parentUntil() berfungsi untuk mengembalikan semua elemen ancestor di antara dua argumen yang diberikan.

Contoh berikut mengembalikan semua elemen ancestor antara elemen <span> dan <div> :

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * { 
  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(){
  $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});
</script>
</head>

<body class="ancestors"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

Hanifah Nurbaeti

Share
Tags: JQueryJQuery Traversing