Bu yazımızda jQuery toArray() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi öğreneceğiz.
toArray() metodu ile Html öğelerini bir diziye atayabiliriz. Örneğin bir sıralı listemiz olduğunu varsayalım. toArray() metodu ile bu listenin elemanlarını bir diziye atıp sonrasında dizi metodları ile istediğimiz işlemleri gerçekleştirebiliriz.
Şöyle bir uygulama yapalım:
⇒ id’si to-array olan bir buton oluşturalım.
⇒ Bir diziye atamak için 3 buton daha oluşturalım.
⇒ id’si to-array olan butona tıkladığımızda, oluşturduğumuz diğer butonları bir diziye atayalım.
⇒ Son olarak oluşturduğumuz dizinin elemanlarını bir döngüye alıp 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="to-array">toArray</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> #to-array { 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 () { $("#to-array").click(function () { var array = $("#box button").toArray(); for (i = 0; i < array.length; i++) { alert(array[i].innerHTML); } }); }); </script> |
toArray butonuna tıkladığınızda diğer butonların metinlerini sırasıyla alert mesajında görebilirsiniz.
Umarım “jQuery toArray() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery animate(), stop() Metodları ve Kullanımları
jQuery slideDown(), slideUp(), slideToggle() Metodları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}