jQuery Gezinti - Kardeşler

Kardeşler aynı ebeveyn elementine sahiptir.

jQuery ile, DOM ağacında elementlerin kardeş elementlerini gezinebilirsiniz.

DOM Ağacında Yatay Gezinti

DOM ağacında yatay gezinti yapmak için birçok yararlı yöntem var:

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

jQuery siblings() Yöntemi

siblings() yöntemi, seçilen elementin tüm kardeş elementlerini döndürür.

Aşağıdaki örnek, <h2> elementinin tüm kardeş elementlerini döndürür:

Örnek

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

Kişisel Deneyim

Kardeş elementlerin arama filtresini uygulamak için seçmeli bir parametre kullanabilirsiniz.

Aşağıdaki örnek, <h2> elementinin kardeş elementlerine ait tüm <p> elementlerini döndürür:

Örnek

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

Kişisel Deneyim

jQuery next() Yöntemi

next() yöntemi, seçilen elementin bir sonraki kardeş elementini döndürür.

Bu yöntem sadece bir element döndürür.

Aşağıdaki örnek, <h2> elementinin bir sonraki kardeş elementini döndürür:

Örnek

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

Kişisel Deneyim

jQuery nextAll() Yöntemi

nextAll() yöntemi, seçilen elementin tüm takip eden kardeş elementlerini döndürür.

Aşağıdaki örnek, <h2> elementinin tüm takip eden kardeş elementlerini döndürür:

Örnek

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

Kişisel Deneyim

jQuery nextUntil() Yöntemi

nextUntil() yöntemi, iki belirtilen parametre arasında yer alan tüm takip eden kardeş elementleri döndürür.

Aşağıdaki örnek, <h2> ile <h6> elementleri arasındaki tüm kardeş elementleri döndürür:

Örnek

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

Kişisel Deneyim

jQuery prev(), prevAll() & prevUntil() Yöntemleri

prev(), prevAll() ve prevUntil() yöntemlerinin çalışma şekli yukarıdaki yöntemlerle benzerdir, ancak tam tersi yönde: onlar DOM ağacında önceki kardeş elementleri döndürür (kardeş elementleri DOM ağacında ileriye doğru değil, geriye doğru gezinir).

jQuery Gezinti Referans Kılavuzu

Tüm jQuery gezinti yöntemlerini öğrenmek için sitemizi ziyaret edin jQuery Gezinti Referans Kılavuzu。