Jquery Each Fonksiyonu
İnternet sayfalarında Jquery kullanılarak yapılan kodlamalarda zaman zaman, seçtiğimiz etiketlerin tümünde uygulanacak fonksiyonlar kullanmaya ihtiyaç duyarız. Each() fonksiyonunun da işlevi budur.
Örneğin bir sayfadaki tüm linkleri bularak linklerin yeni bir sayfada açılmasını sağlayacak target=”_blank” özelliğinin eklenmesi işlemi, each fonksiyonu ile kolaylıkla hazırlanabilir.
Yazım şekli ise aşağıdaki gibidir:
('secim').each
Jquery Anonim Fonksiyonları
Anonim fonksiyonlar (anonymous functions), temelde birer fonksiyon olsalar da, fonksiyon ismi almamaları sebebiyle anonim olarak adlandırılmışlardır.
Örnek Jquery Anonim Fonksiyonu
function () {
//programlama kodları
}
Fonksiyon isimleri olmadığı için, anonim fonksiyonların tek başlarına çağırılması mümkün değildir. Ancak anonim bir jquery fonksiyonunun, standart bir fonksiyonun argümanı olarak kullanılması ile birlikte bize olağanüstü avantajlar sağlarlar.
$('secim').each(function() {
// programlama kodları
});
Yukarıdaki örnekte kırmızı ile işaretlediğim kısım bir anonim fonksiyon, kalan siyah kısım ise standart fonksiyondur.
Örnek olarak bir sayfadaki tüm resimlerin bulunmasını ve bulunduğunda bize bildirim yapılmasını sağlayan Jquery programı için, anonim fonksiyonlara ihtiyaç duyarız.
$('img').each(function() {
alert('resim buldum');
});
Yukarıdaki örnek kodlar çalıştığında, sayfadaki her resim etiketi bulunduğunda “resim buldum” uyarısı verecektir.
Sıklıkla kullandığımız document.ready fonksiyonları da aslında birer anonim fonksiyon içerirler. Daha yakından incelersek:
$(document).ready(function() {
// programlama kodları
});
Jquery this Anahtar Sözcüğü
Jquery’de each() fonksiyonunu kullanırken, döngü içerisindeki tüm elementlerin özelliklerine erişme ihtiyacı duyarız. Örneğin sayfadaki a etiketinin href özelliğini öğrenmek için a etiketinin özelliklerine erişebiliyor olmamız gerekir. This anahtar sözcüğü ile bir anonim fonksiyonu çağırmış olan elemente erişim sağlamamız mümkündür. Döngünün her dönüşünde ise this anahtar sözcüğünün işaret ettiği element de döngüyle birlikte değişecektir. $(this) seçimi ile kullanabileceğimiz this anahtar sözcüğü kullanılarak, sayfa içerisine bağlantılar adlı bir div ekleyelim ve aşağıdaki kodları çalıştıralım.
$('a[href^=http://]').each(function() {
var baglanti = $(this).attr('href');
$('#baglantilar').append('<li>' + baglanti + '</li>');
});
Yukarıdaki örmekte, http ile başlayarak sayfa dışı bağlantı olduğunu anladığımız tüm linkler , baglantilar adını verdiğimiz div içerisine append yöntemi kullanılarak (her yeni birim sona eklenerek) girilmektedir.