Bu yazımızda jQuery each() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
each() metodu ile Html öğelerini bir döngüye alabiliriz. Örneğin bir sıralı listemiz olduğunu varsayalım. each() metodu ile bu listenin elemanlarında tek tek dönüp istediğimiz işlemleri gerçekleştirebiliriz.
Şöyle bir uygulama yapalım:
⇒ id’si each olan bir button oluşturalım.
⇒ Döngüye almak için 3 button daha oluşturalım.
⇒ id’si each olan butona tıkladığımızda, oluşturduğumuz diğer butonları bir döngüye alalım.
⇒ Döngünün her adımında işleme aldığımız butonun metnini alert mesajı ile gösterelim.
Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<button id="each">each</button> <br> <div id="box"> <button class="btn">Button-1</button> <button class="btn">Button-2</button> <button class="btn">Button-3</button> </div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> #each { padding: 10px; margin-right: 8px; margin-bottom: 18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } #box { border: 1px solid black; width: 180px; padding: 20px; } .btn { border: none; padding: 10px; width: 100%; margin-bottom: 10px; background-color: darkgrey; color: #fff; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#each").click(function () { $("#box button").each(function () { var text = $(this).text(); alert(text); }); }); }); </script> |
each butonuna tıkladığınızda diğer butonların metinlerini sırasıyla alert mesajında görebilirsiniz.
Umarım “jQuery each() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery has() Metodu ve Kullanımı
jQuery trim() Metodu ve Kullanımı
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}