动态添加图像jquery [英] Dynamically add images jquery

问题描述

我有一个数组的图像，然后我遍历每个使用$ .each，但我无法获得图像显示在页面上，最终没有显示。

 < ul id =imagesList> 
< li>找不到图像< / li> 
< / ul> 
 
 $（function（）{
 //加载图像数组
 var images = {'image1'：'assets / img / linkedin_30px.png'，'image2'资源/ img / twitter_30px.png'}; 
 $ .each（images，function（）{
 $（'＃imagesList'）。appendTo（'< li>'+ this +'& / li>'）; 
}）; 
}）; 
  

解决方案

您正在使用 appendTo ，而不是 append 。使用 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/

I have an array of images and then I iterate through each using $.each but I can't get the images to show on the page, it ends up with nothing getting showed.

<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>'); 
            });
        });

解决方案

You are using appendTo instead of append. Use append:

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

Or, if you insist on using appendTo:

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

If you want to show a loader while the image is loading, use this:

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);
});

Here's the fiddle: http://jsfiddle.net/fyar1u7a/1/

这篇关于动态添加图像jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！