jQuery Geçişi - Kardeşler


jQuery ile bir öğenin kardeşlerini bulmak için DOM ağacında yanlara doğru hareket edebilirsiniz.

Kardeşler aynı ebeveyni paylaşır. 


DOM Ağacında Yan Yana Geçiş

DOM ağacında yanlara geçiş yapmak için birçok yararlı jQuery yöntemi vardır:

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

jQuery kardeşler() Yöntem

Yöntem siblings(), seçilen öğenin tüm kardeş öğelerini döndürür.

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

Örnek

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

Kardeş aramasını filtrelemek için isteğe bağlı bir parametre de kullanabilirsiniz.

Aşağıdaki örnek, öğe olan tüm kardeş öğelerini <h2>döndürür <p> :

Örnek

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


jQuery next() Yöntemi

Yöntem next(), seçilen öğenin sonraki kardeş öğesini döndürür.

Aşağıdaki örnek, aşağıdakilerin sonraki kardeşini döndürür <h2>:

Örnek

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

jQuery nextAll() Yöntemi

Yöntem nextAll(), seçilen öğenin sonraki tüm kardeş öğelerini döndürür.

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

Örnek

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

jQuery nextUntil() Yöntemi

Yöntem nextUntil(), verilen iki bağımsız değişken arasındaki sonraki tüm kardeş öğeleri döndürür.

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

Örnek

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

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

, ve yöntemleri prev(), tıpkı yukarıdaki yöntemler gibi çalışır ancak ters işlevselliğe sahiptir: önceki kardeş öğeleri döndürürler (DOM ağacındaki kardeş öğeler boyunca ileri yerine geriye doğru hareket ederler).prevAll()prevUntil()


jQuery Alıştırmaları

Egzersizlerle Kendinizi Test Edin

Egzersiz yapmak:

Bir <h2> öğesinin tüm kardeş öğelerini almak için bir jQuery yöntemi kullanın.

$("h2").();


jQuery Geçiş Referansı

Tüm jQuery Traversing yöntemlerine tam bir genel bakış için lütfen jQuery Traversing Referansımıza gidin .