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

动态添加图像jquery

2 个答案: