Mencari Elemen Induk

Dengan menggunakan jQuery kita bisa mencari ancestor (induk atau induk dari induk) dari suatu elemen HTML.

Fungsi parent

Fungsi parent digunakan untuk mencari induk yang berada tepat di atas (direct parent) suatu elemen HTML. Fungsi ini hanya mencari satu layer induk ke atas. Contoh di bawah ini mencari direct parent dari setiap elemen span.

$(document).ready(function(){
  $("span").parent();
});

Jalankan Contoh

Fungsi parents

Fungsi parents digunakan untuk mencari semua induk yang berada di atas suatu elemen HTML. Fungsi ini mencari induk elemen mulai dari induk yang berada tepat di atas elemen tersebut (direct parent) sampai kepada induk yang paling atas (root parent). Contoh di bawah ini mencari semua induk elemen dari setiap elemen span.

$(document).ready(function(){
  $("span").parents();
});

Jalankan Contoh

Fungsi parents juga bisa diberikan satu parameter. Parameter ini berguna untuk melakukan pemilihan (filtering) dari semua induk hasil pencarian. Contoh di bawah ini mencari semua induk elemen dengan tipe ul (tag ul) dari setiap elemen span.

$(document).ready(function(){
  $("span").parents("ul");
});

Jalankan Contoh

Fungsi parentsUntil

Fungsi parentsUntil digunakan untuk mencari semua induk yang berada di atas suatu elemen HTML. Fungsi ini mencari induk elemen mulai dari induk yang berada tepat di atas elemen tersebut (direct parent) sampai ke induk elemen dengan tipe tertentu. Contoh di bawah ini mencari semua induk elemen dari setiap elemen span sampai ke induk elemen dengan tipe div.

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Jalankan Contoh

Tutorial sebelumnya : Mengenal Traversing
Tutorial setelahnya : Mencari Elemen Anak
Semua Tutorial JQuery : Tutorial JQuery