Başka bir konsept videosu! Bu, jQuery'de anlamanız gereken "bunlardan sadece biri". Geçmişte diğer popüler JavaScript kitaplıklarının bu şekilde yapmadığı için aslında jQuery'ye biraz benzersizdir.
Seçicileri zaten epeyce ele aldık. Örneğin, bunun $("p")bir sayfadaki tüm paragrafları seçeceğini zaten biliyorsunuz . Sadece ilki ya da rastgele olanı değil, hepsi. Bir sayfada bunlardan çok olabileceğini kolayca hayal edebilirsiniz. Şimdi bunu yaptığınızda ne olacağını hayal edin:
$("p").hide();Hepsi gizleniyor değil mi? Sağ. İlki ya da rastgele olanı değil, hepsi. Bu örtük yineleme . Perde arkasında jQuery, bulduğu tüm öğe kümesi boyunca otomatik olarak döngü oluşturur ve bunlar üzerinde seçtiğiniz yöntemi çalıştırır. Bunu yapmak için kelimenin tam anlamıyla bir döngü yazmamız gerekmiyor. JavaScript'e girişiniz jQuery ise oldukça açık görünüyor, ancak geçmişte birçok kitaplık, öğe koleksiyonları üzerinde kendi kendinize döngü oluşturmanızı gerektiriyordu.
İsterseniz, döngüyü yine de kendiniz yazabilirsiniz. Bu, jQuery döngü yöntemlerini kullanarak muhtemelen şöyle görünecektir:
$("p").each(function() ( $(this).hide(); ));Bu hemen hemen aynı şey. Mutlaka değil, ama yapabilirsin. Bu açık bir yinelemedir .
Bazen açık yineleme yapmanız gerekir. Temel olarak, değerine thiserişmemiz ve onunla özel bir şey yapmamız gerekirse, çalışmak için kendi döngü yapımıza ihtiyacımız olacak.
Bu ekran video kaydındaki örnek, liste öğelerindeki karakterleri sayıyor ve bunu dizenin sonuna ekliyordu. Bunun için açık bir yinelemeye ihtiyacımız olacak.
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen 4b53b9f55662d0d26339e18277500eee'yi görün
Burada jQuery'nin her () yöntemini kullandık, bu da ihtiyacımız olan şey için mükemmel. Bizim için yaptığı yararlı bir şey, bize gerektiğinde erişebileceğimiz her yinelemeye sıfır endeksli bir sayaç vermesidir.
$(".there-are-three-of-me").each(function(i) ( console.log(i); )); // 0 // 1 // 2