गतिशील रूप से छवियों को जोड़ें jquery

Question

मेरे पास छवियों की एक सरणी है और फिर मैं $ .each का उपयोग करके प्रत्येक के माध्यम से पुन: प्रयास करता हूं लेकिन मुझे छवियों को पृष्ठ पर दिखाने के लिए नहीं मिल सकता है, यह दिखाए जाने वाले कुछ भी समाप्त नहीं होता है।

<ul id="imagesList"> 
    <li>No images found</li> 
</ul> 

$(function(){ 
      //load image array 
      var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'}; 
      $.each(images, function(){ 
       $('#imagesList').appendTo('<li>' + this + '</li>'); 
      }); 
     }); 

Answer 1

आप append के बजाय appendTo उपयोग कर रहे हैं। append का उपयोग करें:

$.each(images, function(){ 
    $('#imagesList').append('<li><img src="' + this + '" /></li>'); 
}); 

या, यदि आप appendTo का उपयोग करने पर जोर देते हैं:

$.each(images, function(){ 
    $('<li><img src="' + this + '" /></li>').appendTo('#imagesList'); 
}); 

आप एक लोडर चित्र लोड करते समय किया जाता है को दिखाने के लिए चाहते हैं, इस का उपयोग करें:

var $list = $('#imagesList'); 

$.each(images, function(i, src) { 
    var $li = $('<li class="loading">').appendTo($list); 

    $('<img>').appendTo($li).one('load', function() { 
     $li.removeClass('loading'); 
    }).attr('src', src); 
}); 

यहाँ पहेली: http://jsfiddle.net/fyar1u7a/1/

Answer 2

कोई समस्या नहीं है आपके काम के साथ कार्य करने के लिए। आप इसे गलत तरीके से उपयोग कर रहे हैं।

कोड नीचे प्रयास करें ..

<ul id="imagesList"> 
    <li>No images found</li> 
</ul> 
$(function(){ 
      //load image array 
      var images = {'image1':'assets/img/linkedin_30px.png','image2':'assets/img/twitter_30px.png'}; 
      $.each(images, function(){ 
       $('<li>' + this + '</li>').appendTo('#imagesList'); 
      }); 
     });