Javascript / Jquery：追加周期问题

Question

我通过API / Json获得Flickr画廊。 我的代码存在的问题是，我获取的图片库有30张图片，但是此代码段如下：

$.each(data.album.content,function (index,content)
        {
            album_container.append(column);
         [...]
}

仅将一个<div>追加到容器，而不是30，但以正确的方式将30 a/img追加到此唯一column 。 我不知道为什么以及如何解决它。

谢谢您的帮助！

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    callGetAjax(absolute_path+'/feed/'+feed_url)
    .success(function(data)
    {
    })
    .error(function(xhr, statusText)
    {//console.log(statusText);
    })
    .done(function(data)
    {
        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);
        var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>');
        $.each(data.album.content,function (index,content)
        {
            album_container.append(column);
            $('<a/>')
                .append($('<img class="img-responsive">').prop('src', content.photo))
                .prop('href', content.target)
                .prop('title', content.title)
                .attr('data-gallery', '')
                .appendTo(column)
                .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});
        });


    }); 
}

当前的HTML结果：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
 <a href=".."><img src="..." /></a>
 <a href=".."><img src="..." /></a>
 <a href=".."><img src="..." /></a>
 [...]
</div>

我需要的HTML：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">
     <a href=".."><img src="..." /></a>
</div>

[...]

Answer 1

请记住， .append()将移动HTML节点周围的DOM树时，节点在文档中已经存在。 就您而言，您已声明：

var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>')

… 在 $.each()循环之外，因此导致它在album_container内部反复移动，而不是像您期望的那样被克隆 。 因此，您要做的是在循环中声明它，以使实例不在循环范围之内：

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    callGetAjax(absolute_path+'/feed/'+feed_url)
    .success(function(data)
    {
    })
    .error(function(xhr, statusText)
    {//console.log(statusText);
    })
    .done(function(data)
    {
        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);

        $.each(data.album.content,function (index,content)
        {
            // Creates a new column for every image element
            var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>'),
                item = $('<a/>')
                    .append($('<img class="img-responsive">').attr('src', content.photo))
                    .attr('href', content.target)
                    .attr('title', content.title)
                    .attr('data-gallery', '')
                    .appendTo(column)
                    .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});

            // Append column instance to the album container
            album_container.append(column);

        });


    }); 
}

---

如果您还想查看代码，我是否建议您从jqXHR.success()和jqXHR.error()方法过渡？ 不推荐使用它们，而推荐使用jqXHR.done()和jqXHR.fail()方法。 使用promise，我们的骨干如下所示：

var album_container = $('div#album');

function callGetAjax(url)
{
    return $.get(url,{});
}    

function getAlbum(feed_url)
{
    // Store returned promise from $.get() in a variable
    var ajaxCall = callGetAjax(absolute_path+'/feed/'+feed_url);

    // Now we listen to the promise
    ajaxCall
    .done(function(data) {

        var loaded = 0;
        album_title = data.album.album_title;
        $('h1#gallery-title').html(album_title);

        $.each(data.album.content,function (index,content)
        {

            var column  = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>'),
                item = $('<a/>')
                    .append($('<img class="img-responsive">').attr('src', content.photo))
                    .attr({
                        'href': content.target,
                        'title': content.title,
                        'data-gallery': ''
                    })
                    .appendTo(column)
                    .colorbox({rel:'gallery', speed:0, maxWidth:'95%', maxHeight:'95%'});

            album_container.append(column);

        });


    })
     .fail(function(xhr, statusText) {
        // Log error
        // console.log(statusText);
    }); 
}