Pemutar - Saudara

Saudara memiliki elemen orangtua yang sama.

Dengan jQuery, Anda dapat melakukan penjelajahan elemen saudara di pohon DOM.

Penjelajahan horizontal di pohon DOM

Ada banyak metode yang berguna untuk melakukan penjelajahan horizontal di pohon DOM:

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

Metode jQuery siblings()

Metode siblings() mengembalikan semua elemen saudara yang dipilih.

Contoh di bawah ini mengembalikan semua elemen saudara <h2>:

Contoh

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

Coba sendiri

Anda juga dapat menggunakan parameter pilihan untuk menyaring pencarian elemen saudara.

Contoh di bawah ini mengembalikan semua elemen <p> yang berada di antara elemen saudara <h2>:

Contoh

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

Coba sendiri

Metode jQuery next()

Metode next() mengembalikan elemen saudara berikutnya yang dipilih.

Metode ini hanya mengembalikan satu elemen.

Contoh di bawah ini mengembalikan elemen saudara berikutnya <h2>:

Contoh

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

Coba sendiri

Metode jQuery nextAll()

Metode nextAll() mengembalikan semua elemen saudara yang mengikuti elemen yang dipilih.

Contoh di bawah ini mengembalikan semua elemen saudara yang mengikuti <h2>:

Contoh

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

Coba sendiri

Metode jQuery nextUntil()

Metode nextUntil() mengembalikan semua elemen saudara yang mengikuti antara dua parameter yang diberikan.

Contoh di bawah ini mengembalikan semua elemen saudara antara elemen <h2> dan <h6>:

Contoh

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

Coba sendiri

Metode jQuery prev(), prevAll() & prevUntil()

prev(), prevAll() serta metode prevUntil() bekerja seperti metode di atas, hanya berlawanan arah saja: mereka kembalikan elemen saudara yang ada di depan (di pohon DOM dengan mengelilingi elemen saudara ke belakang, bukan ke depan).

Panduan Referensi Penjelajahan jQuery

Untuk mengetahui semua metode penjelajahan jQuery, silakan kunjungi Panduan Referensi Penjelajahan jQuery。