Mencari Elemen Sejajar

View Categories

Mencari Elemen Sejajar

Dengan menggunakan jQuery kita bisa mencari sibling (elemen yang sejajar atau setingkat) dari suatu elemen HTML.

Fungsi siblings

Fungsi siblings digunakan untuk mencari semua elemen HTML yang sejajar (sibling) dari suatu elemen HTML. Contoh di bawah ini mencari semua elemen sibling dari elemen h2.

$(document).ready(function(){
  $("h2").siblings();
});

Jalankan Contoh

Fungsi siblings juga bisa menerima parameter untuk memilih sibling dengan tipe tertentu (filtering). Contoh di bawah ini mencari semua elemen sibling dengan tipe paragraf (tag p) dari elemen h2.

$(document).ready(function(){
  $("h2").siblings("p");
});

Jalankan Contoh

Fungsi next

Fungsi next digunakan untuk mencari elemen sibling pada posisi tepat setelah suatu elemen HTML. Contoh di bawah ini mencari elemen sibling pada posisi tepat setelah elemen h2.

$(document).ready(function(){
  $("h2").next();
});

Jalankan Contoh

Fungsi nextAll

Fungsi nextAll digunakan untuk mencari semua elemen sibling setelah suatu elemen HTML. Contoh di bawah ini mencari semua elemen sibling setelah elemen h2.

$(document).ready(function(){
  $("h2").nextAll();
});

Jalankan Contoh

Fungsi nextUntil

Fungsi nextUntil digunakan untuk mencari semua elemen sibling setelah suatu elemen HTML sampai ke elemen sibling dengan tipe tertentu. Contoh di bawah ini mencari semua elemen sibling setelah elemen h2 sampai ke elemen dengan tipe h6.

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

Jalankan Contoh

Fungsi prev, prevAll dan prevUntil

Fungsi prev, prevAll dan prevUntil berfungsi sama seperti fungsi next, nextAll dan nextUntil. Perbedaannya adalah fungsi prev, prevAll dan prevUntil mencari sibling pada posisi sebelum elemen HTML tertentu.

Tutorial sebelumnya : Mencari Elemen Anak
Tutorial setelahnya : Memfilter Elemen
Semua Tutorial JQuery : Tutorial JQuery 

Tinggalkan Balasan