[英]Javascript/Jquery: issue with append in cycle
I get Flickr gallery via API/Json. 我通过API / Json获得Flickr画廊。 My issue with my code is that the gallery that I fetch has ~ 30 picture, but this snippet:
我的代码存在的问题是,我获取的图片库有30张图片,但是此代码段如下:
$.each(data.album.content,function (index,content)
{
album_container.append(column);
[...]
}
Appends only one <div>
to the container, and not 30, but appends in right way 30 a/img
to this unique column
. 仅将一个
<div>
追加到容器,而不是30,但以正确的方式将30 a/img
追加到此唯一column
。 I cannot figure why and how solve it. 我不知道为什么以及如何解决它。
Thank you for your help! 谢谢您的帮助!
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%'});
});
});
}
Current HTML result: 当前的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 that I need: 我需要的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>
[...]
Remember that .append()
will move the HTML node around the DOM tree when the node already exists in your document. 请记住,
.append()
将移动HTML节点周围的DOM树时,节点在文档中已经存在。 In your case, you have declared: 就您而言,您已声明:
var column = $('<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2"></div>')
… outside of your $.each()
loop, therefore causing it to be repeatedly moved around inside album_container
, instead of being cloned as you have expected. … 在
$.each()
循环之外,因此导致它在album_container
内部反复移动,而不是像您期望的那样被克隆 。 Therefore, what you would do is to declare it within your loop, such that the instance is not outside the scope of your loop: 因此,您要做的是在循环中声明它,以使实例不在循环范围之内:
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);
});
});
}
If you're also looking for a review of your code, may I suggest you transition away from the jqXHR.success()
and jqXHR.error()
methods? 如果您还想查看代码,我是否建议您从
jqXHR.success()
和jqXHR.error()
方法过渡? They have been deprecated in favour of the jqXHR.done()
and jqXHR.fail()
methods. 不推荐使用它们,而推荐使用
jqXHR.done()
和jqXHR.fail()
方法。 Using promises, we have a backbone that looks like this: 使用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);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.