Yarım görüntüleri sayfa

Question

Bir dosyayı çağıran bir javascript/ajax tabanlı arama sistemine sahip olmalıdır ve başına sonuçlarını eklenen/gösterilmektedir json veri

Numune JSON Veri

{"id":["33","34","35","36","37","38","39","40","73"],"user_id":["16","16","16","16","16","16","16","16","17"],"name":["Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Ram Bachan","Amar Nath"],"date":["2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21","2016-03-21"],"outlet":["Rani Ka Bagh 1","Rani Ka Bagh 2","Rani Ka Bagh 3","Rani Ka Bagh 4","Rani Ka Bagh 5","Rani Ka Bagh 6","Rani Ka Bagh 7","Rani Ka Bagh 8","Hide Market 1"],"approved":["P","P","P","P","P","P","P","P","P"],"fileName":["409160.jpg","424831.jpg","785371.jpg","27401.jpg","527450.jpg","759700.jpg","540742.jpg","280322.jpg","959879.jpg"],"resultsCount":248,"currentPage":1,"lastPage":28} 

JSON veri Üstü birçok bilgi ve görüntü adı var

Sadece json verilerini ayrıştırarak ve div içine resim ekliyorum

var jsonData = JSON.parse(ajax.responseText); 
var img = document.getElementsByClassName("image"); 
for (var i = 0; i < jsonData['id'].length; i++) { 
    console.log(i, jsonData['fileName'][i]); 
    var imgName = jsonData['fileName'][i].split(","); 
    img[i].innerHTML = "<div><img src='/user_data/" + jsonData["user_id"][i] + "/" + imgName[0] + "' class='image' /></div>"; 
} 

Ne oluyor? İlk resim eklendi & görüntüleniyor sonraki üçüncü atlar ekleniyor ve sonraki sonraki atlar görüntülenir.

sayfa başına toplam arama sonuçları sadece 5 görüntüleri

görüntülenir 10. Eğer ben WTH oluyor bulmak için debugger kullanarak çalıştı ve ben tam olarak ne olup bittiğini yok yok garip bir şey buldum. Görüntü img değişken kontrol ettim geçti

olarak ayarlanmıştır eklenmez zaman döngü çalışır ve görüntü sonraki denemede daha

için img değişken setleri eklenir

tüm görüntüler var ve düzgün bir şekilde yüklendi. krom Ağ sekmesi tüm görüntüleri istenir gösterir ve orada durum Ardından div yılında <img> etiketinde aynı sınıf tutuyor, className='image' tarafından elemanlarını seçerek 200

Answer 1

olduğunu. Seçici değişkeni değişti ve yeni eklenen '' seçeneği de seçildi.
Bu nedenle döngü beklendiği gibi çalışmıyor.

document.querySelectorAll('div.image');'dan birini kullanın ya da eklenen img etiketlerine farklı bir sınıf yerleştirin.

Bkz. this fiddle. 4 div ile çalıştım ama işe yarıyor gibi görünüyor.