Question

我通过API / Json获得Flickr图库。我的代码问题是我获取的图库有~30张图片，但是这个片段：

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

仅向容器添加一个<div>，而不是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()将围绕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()方法。使用promises，我们有一个看起来像这样的主干：

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 / Jquery：在循环中附加的问题

1 个答案: