Jquery each fonksiyonu C# kullananlar için uzak bir durum değildir C#’da kullandığımız foreach döngüsünü Jquery’de each fonksiyonu ile sağlamaktayız. Makale devamında each fonksiyonu detayına ulaşabilirsiniz.

İçerik göster

Jquery each fonksiyonu ile diziler, elementler’de döngü ile işlem yapma

İlk örneğimizde dizi üzerinden işlem yapacağız diziler içerisindeki eleman sayısı kadar dönüp dizi değerlerini ekran liste olarak bastıracağız. Kullanacağımız html kodu aşağıdaki gibidir.

Html Kodu

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></ script>
        <title></title>
    </head>
<body>
    <ul id="List">
 
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</ul>

</body>

</html>

Şimdi ise Jquery each fonksiyonu ile üstteki html kodunda yer alan List id’li html liste elementi içerisine list’e elemanı olarak ekleyeceğiz dizi elemanlarını.

Jquery Kodu

<script type="text/javascript">
    $(function() {
        var list = [1, 2, 3, 4, 5, 6, 7];
        $(list).each(function(index, deger) {
            var li = document.createElement("li");
            li.innerText = "Deger: " + deger + " - Index: " + index;
            document.getElementById("List").appendChild(li);
        });
    });
</ script>

$(function() {

var list = [1, 2, 3, 4, 5, 6, 7];

$(list).each(function(index, deger) {

var li = document.createElement("li");

li.innerText = "Deger: " + deger + " - Index: " + index;

document.getElementById("List").appendChild(li);

});

</ script>

Each fonksiyonunun 2 parametre aldığını görüyorsunuz isterseniz bu parametreleri eklemek zorunda değilsiniz ama kolaylık sağlamaktadır döndüğünüz elemanın değeri ve index değerini vermektedir bizde bu parametreleri kullanarak liste elemanına değer ve index değerini bastırıyoruz. Sonuca altta Result sekmesinden ulaşabilirsiniz.

Sonuç

Son olarak each fonksiyonuna sadece dizi parametre olarak geçilmiyor isterseniz jquery seçici ile sonuç olarak dönen nesneleri döngüye sokabilirsiniz örnek olarak bizim dizi ile liste elemanı oluşturduğumuz gibi oluşmuş bir liste elemanından değerleri sırasıyla arraya aktarabilirsiniz. Şimdi bununla ilgili bir örnek yapalım örneğe ait tüm kodlar altta yer almaktadır.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></ script>
        <script type="text/javascript">
            $(function() {
                var list = new Array();
                $("#List li").each(function(index, deger) {
                    list[index] = deger.innerText;
                });
                console.log(list);
            });
        </ script>
        <title></title>
    </head>
<body>
    <ul id="List">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

$(function() {

var list = new Array();

$("#List li").each(function(index, deger) {

list[index] = deger.innerText;

});

console.log(list);

});

</ script>

</head>

<body>

</ul>

</body>

</html>

Sonucu tarayıcının konsol’una yazdırmaktayım console ile ilgili detaylı bilgi için Javascript İle Tarayıcı Konsoluna Loglama İşlemleri adlı makalemize gözatabilirsiniz.

Güncelleme(20.01.2020): Makale 2014 yılında yazıldığından ufak bir dipnot ile bazı noktalarda bilgilendirme yapmak istiyorum. jQuery javascript’in her geçen gün yeni özellikler ile daha donanımlı hale gelmesi ile popülerliğini kaybetti ve mağlesef popülerliğini de kaybetmeye mahkum gibi gözüküyor bunun sebebi de mağlesef en çok dikkat çeken konulardan biri olan performans konusu javascript’in pure alternatif yöntemleri ile yaptığınız işlemleri 10, 100 ve bazı operasyonlarda mağlesef ki 1000+ kat daha yavaş olduğu durumlar gözlemlendi. Sana inanmıyorum bana kanıt göster diyebilirsiniz ve haklısınız da. Size bu makalenin konusu olan jQuery each fonksiyonu ile pure javascript forEach fonksiyonu arasındaki uçurumu canlı olarak sunan heme alttaki adrese gözatmanızı öneriyorum.

https://www.measurethat.net/Benchmarks/Show/11/0/foreach-vs-jquery-each#latest_results_block

Adreste test sonuçları değerleri şu şekilde çıktı ben de.

Test name	Executions per second
forEach (Native)	103771.9 Ops/sec
each (jQuery)	27920.1 Ops/sec

Pure forEach fonksiyonu saniyede 103.771 bin işlem gerçekleştirebilirken. jQuery each fonksiyonu sadece 27.920 bin işlem gerçekleştirebildi. Bu arada buradaki değerler cihaza göre farklılık gösterecektir siz de farklı sonuçlar çıkabilir ama jQuery each fonksiyonunun üste çıktığı sonuçlar değil tabi ki 😁

✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

📚 İlgilenebileceğiniz Diğer Bazı Makaleler

5/5 - (2 votes)

Kategoriler

Bloga e-posta ile abone ol

Jquery Each Fonksiyonu İle Diziler, Elementler Döngü İle İşlem Yapma

Jquery each fonksiyonu ile diziler, elementler’de döngü ile işlem yapma

Html Kodu

Jquery Kodu

Sonuç

📚 İlgilenebileceğiniz Diğer Bazı Makaleler

Bir yanıt yazın Yanıtı iptal et

Jquery each fonksiyonu ile diziler, elementler’de döngü ile işlem yapma

Html Kodu

Jquery Kodu

Sonuç

📚 İlgilenebileceğiniz Diğer Bazı Makaleler

Bir yanıt yazın Yanıtı iptal et

Murat Öner sitesinden daha fazla şey keşfedin