Bu çalışmamızda JQuery ile <ul> etiketinin içerisine tanımladığımız dizideki isimleri yazdıracağız.
Çalışmaya başlamadan önce ilk olarak JQuery’nin kendi sitesinden JQuery dosyasını indiriyoruz. https://jquery.com/
|
1 2 3 4 5 6 7 8 9 |
<button id="ekle">Listeye Ekle</button> <ul id="isimListe"> </ul> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/calisma.js"></script> |
HTML: Tıklama olayını atamak için bir buton oluşturuyoruz. İsimlerin listelenmesini istediğimiz için ul etiketi açıyoruz.
Dosyaları bağlarken ilk önce JQuery’nin dosyasını bağladığımıza emin oluyoruz. Eğer kendi çalışma dosyamızı jquery dosyasından önce bağlarsak sayfa yüklenirken ilk olarak bizim dosyamızı tanımlayacak ve içerisindeki tanımlamaları algılamayacaktır.
|
1 2 3 4 5 6 |
$(document).ready(function(){ var isimler=["Ali", "Ayşe", "Ahmet", "Nurten", "Nurcan", "Aleyna", "Mehmet", "Mine"]; var sayac=0; }); |
JQUERY: Kodlarımızı kurucu method içerisine yazıyoruz. İlk olarak bir dizi tanımlıyoruz. Dizinin içerisindeki isimleri şimdilik kendimiz yazıyoruz. Sayaç oluşturarak dizinin elemanları bittiği takdirde devam etmesini önlüyoruz. Yani dizinin son elemanından sonra isimler tekrar etmeyecek.
|
1 2 3 4 5 6 7 8 9 10 |
$("#ekle").on("click",function() { if(sayac<isimler.length) { $("#isimListe").append("<li>"+isimler[sayac]+"</li>"); sayac++; } }); |
Oluşturduğumuz butona tıklama olayını atıyoruz.
İsimleri sürekli olarak ekrana yazdırmayacağımız için bir koşul oluşturuyoruz. Eğer oluşturduğumuz sayaç dizi eleman sayısından küçükse kodlar çalışacaktır. Sayaç dizi eleman sayısına eşit veya büyük olduğunda koşul çalışmayacak.
Dizinin uzunluğu daha sonralarda değişebileceği için ‘isimler.Lenght’ yaptık. Bu dizinin uzunluğu anlamına gelmektedir.
‘append’ ile dizideki isimleri sırasız listenin içerisine aktarmak için kullanıyoruz.
Kodları toparlayacak olursak;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function() { var isimler=["Ali", "Ayşe", "Ahmet", "Nurten", "Nurcan", "Aleyna", "Mehmet", "Mine"]; var sayac=0; $("#ekle").on("click",function() { if(sayac<isimler.length) { $("#isimListe").append("<li>"+isimler[sayac]+"</li>"); sayac++; } }); }); |
Listenin tamamını tek tıklama ile göstermek için for döngüsü kullanıyoruz. Yani kodlarımız şu şekilde değişiyor;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(document).ready(function(){ var isimler=["Ali", "Ayşe", "Ahmet", "Nurten", "Nurcan", "Aleyna", "Mehmet", "Mine"]; var sayac=0; $("#ekle").on("click",function() { for(var i=0;i<isimler.length;i++) { $("#isimListe").append("<li>"+isimler[i]+"</li>"); } }); }); |
[…] Jquery ile İsim Listeleme […]
Güzel paylaşım