jQuery Traversing - Saudara


Dengan jQuery Anda dapat melintasi ke samping di pohon DOM untuk menemukan saudara kandung dari suatu elemen.

Saudara kandung berbagi orang tua yang sama. 


Melintasi Sideways di Pohon DOM

Ada banyak metode jQuery yang berguna untuk melintasi ke samping di pohon DOM:

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

jQuery saudara () Metode

Metode siblings()ini mengembalikan semua elemen saudara dari elemen yang dipilih.

Contoh berikut mengembalikan semua elemen saudara dari <h2>:

Contoh

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

Anda juga dapat menggunakan parameter opsional untuk memfilter pencarian saudara kandung.

Contoh berikut mengembalikan semua elemen saudara dari <h2>itu adalah <p> elemen:

Contoh

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


jQuery next() Metode

Metode next()mengembalikan elemen saudara berikutnya dari elemen yang dipilih.

Contoh berikut mengembalikan saudara berikutnya dari <h2>:

Contoh

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

jQuery nextAll() Metode

Metode nextAll()ini mengembalikan semua elemen saudara berikutnya dari elemen yang dipilih.

Contoh berikut mengembalikan semua elemen saudara berikutnya dari <h2>:

Contoh

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

jQuery nextSampai () Metode

Metode nextUntil()ini mengembalikan semua elemen saudara berikutnya antara dua argumen yang diberikan.

Contoh berikut mengembalikan semua elemen saudara antara a <h2>dan <h6>elemen:

Contoh

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

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

, prev()dan metode prevAll()bekerja prevUntil()seperti metode di atas tetapi dengan fungsi terbalik: mereka mengembalikan elemen saudara sebelumnya (melintasi mundur sepanjang elemen saudara di pohon DOM, bukan maju).


Latihan jQuery

Uji Diri Anda Dengan Latihan

Olahraga:

Gunakan metode jQuery untuk mendapatkan semua elemen saudara dari elemen <h2>.

$("h2").();


Referensi Melintasi jQuery

Untuk ikhtisar lengkap tentang semua metode Jelajah jQuery, silakan kunjungi Referensi Jelajah jQuery kami .