gpt4 book ai didi

JavaScript/Jquery : issue with append in cycle

转载 作者:行者123 更新时间:2023-12-03 10:07:44 24 4
gpt4 key购买 nike

我通过 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/Jquery : issue with append in cycle,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30285080/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com