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

您正在使用 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

你的appendTo函数没有什么问题。您以错误的方式使用它。

请尝试下面的代码..

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