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