Jquery Each Fonksiyonu

eachSon zamanlarda javascript ve jquery öğrenmek için kendime biraz baskı uyguluyorum ki çok da iyi oluyor.Yusuf Doru arkadaşım ile javascript hakkında konuştuğumuzda basit bir dil yapısı var yazımı kolay ve anlaşılabilir demişti.Tabi ki konuşurken öyle gözüküyor ama bunu koda dökerken daha iyi anlayabiliyorsunuz.Bu yüzden gördüğünüz her kod parçacığını çalıştırın ve “geliştirin” diyebilirim.Bende başladığımdan beri iyi gidiyor diyebilirim.Bu yüzden ilerletebilmek için elimden geldiğince öğrendiğim bir çok fonksiyonu geliştirerek yada anlatımını örnekleyerek paylaşacağım.Ayrıca faydasını php ile kullanırken çok  gördüm diyebilirim.Bu konuda da “each” fonksiyonundan bahsedeceğim.Gerçekten çoğu yerde kurtarıcı olabiliyor.

Örnek olarak dinamik olarak gelen bir veriye each ile döngüye sokup 1,0 şeklinde bir sınıf atayarak bunlara stil atayabiliriz.
Kod satırları ve açıklamaları alt satırda belirttim.

$(function(){
  var i = 3; //i adlı bir değişken oluşturup buna 3 değerini atıyoruz
  $("div.container div").each(function(i) { //container sınıfının içerisindeki div elementini döndürüyoruz
    $(this).addClass("" + (i%2)); //dinamik olarak gelecek div elementlerine arttıkça 0,1 olarak sınıf atıyoruz
    $("div." + (i%1)).css({"background-color" : "black","width" : "100px","height" : "100px","float" : "left"});//her 0 sınıfı için siyah bir background atıyoruz
    $("div." + (i%2)).css({"background-color" : "yellow","width" : "100px","height" : "100px","float" : "left"});//her 1 sınıfı için siyah bir background atıyoruz
  });
});

Ayrı olarak Güven Altuntaş’ın tavsiyesi ile aynı fonksiyonu daha düzenli bir yapıya indirebiliriz.

$(function(){
  $("div.container div").each(function(i) { //container sınıfının içerisindeki div elementini döndürüyoruz
     if(i%2 == 0){
       $(this).css({"background-color" : "black","width" : "100px","height" : "100px","float" : "left"});
     }else{
       $(this).css({"background-color" : "yellow","width" : "100px","height" : "100px","float" : "left"});
     }
 });
});

Bize ne kazandırdı dersek daha düzenli bir yapı oldu.Ayrı bir değişken atayıp sonra o değişkeni alıp işleme sokup kendimizi tekrar ederek işlem uygulatmamış oluyoruz.Yorumları ve önerisi için Güven abiye teşekkür ederim.
Demo : Linki

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“Jquery Each Fonksiyonu” üzerine bir yorum

  1. @Güven Altuntaş

    örneğinde dikkatimi çeken $ fonksyonunu direk olarak document ready işleviyle kullanmışsın. düzenli bir yapıda çalışmak için $ fonksyonunun $(document).ready(function(){/*bişeyler bişeyler*/}); şeklinde kullanılması daha düzenli olabilir.

    each fonksyonunun içindeki i parametreni variable olarak tanımlamana gerek yok. $ fonksyonuna bir selector gönderdiğinde max i değeri selector.length oalcağından bu tanımlamayı 0 dan length e kadar uygular. burada i nod sayımız olacak ise divlere class eklemek yerine bir if ile ayrım yapabilir böylece hardcoded html mizi daha temiz kılabiliriz. bunun için ise :

    if(i%2==0){
    $(this).css(“background-color”,”#000000″);
    }else{
    $(this).css(“background-color”,”#ffffff”);
    }

    gibi bir ifade kullanabilirsin. Böylece elindeki her dive ayrı bir class vermek durumunda kalmayacaksın.

    Gelelim asıl noktayaörneğindeki kodda çok genel bir div kullanımına müdahale ediyoruz. hemen hemen tüm sayfayı etkileyecek bir script bu. o zaman $ fonksyonu kullanmadan bu işlemi yaparak bundle kullanma şansımızı elimizde tutabiliriz. bundle larımızın opera tarayıcısında minify edilmiş $ fonksyonunu patlattığını unutmayalım.

    Şöyle ki:

    var targetelements = document.getElementById(“container”).getElementsByTagName(“div”);/*bu kod parçası bana html element objelerinden oluşan bir array dönecektir*/

    for(var i=0; i

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir