Bu yazımızda Jquery de siblings, netx, nextAll, nextUntil, prev, prevAll ve prevUntil metodlarını öğreneceğiz. Bildiğiniz gibi Html sayfaları bir ağaç yapısı şeklindedir. İç içe etiketlerden oluşur.
En basit haliyle örnek verecek olursak Html sayfalarının yapısı şu şekildedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
Gördüğünüz gibi en başta html etiketi, onun içerisinde ise head ve body etiketleri var. Head etiketi içerisinde de title etiketi vs..
İşte Jquery bize bunun gibi iç içe etiketleri seçip işlem yapmamızı kolaylaştıran metodlar sunuyor.
Şimdi bu metodların ne işe yaradığını anlatıp, uygulama üzerinde nasıl kullanabileceğimize bakalım.
► siblings metodu, kardeş etikeleri seçmemizi sağlar. Yani iç içe değilde aynı hizada olan etiketleri diyebiliriz.
Örneğin html etiketi içerisindeki head ve body etiketleri kardeş etiketlerdir.
► next metodu, seçmiş olduğumuz bir etiketten sonra gelen ilk kardeş etiketi seçer.
► nextAll metodu, seçmiş olduğumuz bir etiketten sonra gelen tüm kardeş etiketleri seçer.
► nextUntil metodu, seçmiş olduğumuz bir etiketten sonra gelen tüm kardeş etiketlerden belirttiğimiz etikete kadar olanları seçer.
► prev metodu, seçmiş olduğumuz bir etiketten önce gelen ilk kardeş etiketi seçer.
► prevAll metodu, seçmiş olduğumuz bir etiketten önce gelen tüm kardeş etiketleri seçer.
► prevUntil metodu, seçmiş olduğumuz bir etiketten önce gelen tüm kardeş etiketlerden belirttiğimiz etikete kadar olanları seçer.
Şimdi teoride kalan bilgilerimizi uygulamaya dökelim.
Şu şekilde Html kodları tanımlayıp üzerinde metodlarımızı uygulayalım.
|
1 2 3 4 5 6 7 8 9 10 |
<div> div (ebeveyn) <h3>h3 (kardeş)</h3> <h5>h5 (kardeş)</h5> <h4>h4 (kardeş)</h4> <p>p (kardeş)</p> <span>span (kardeş)</span> </div> |
Butonlara tıklayarak, kullandığımız metodların seçmiş olduğu etiketlere kenarlık değeri vererek daha görünür olmasını sağlayalım.
Örnekleri incelediğinizde daha anlaşılır olacaktır.
Kodlarımız şu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
, next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil() Kullanımı){kind=link}