javascript - Javascript/Jquery:追加周期问题

我通过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>

[...]

最佳答案

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

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

关于javascript - Javascript/Jquery:追加周期问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30285080/