使用追加,在循环克隆jquery
问题描述:
我想创建几个div for循环。我使用.append()和.clone方法,但div的顺序是错误的。即使我在循环之前创建了div,在index.html第一个div(class news0)是在最后一个div(class news3)之后生成的,它应该是最后一个div。我该如何解决这个问题?使用追加,在循环克隆jquery
$news.ready(function() {
var query = [];
console.log(query);
$.ajax({
url: baseUri + "news",
data: {q: query},
success: showNews
});
return false;
});
function showNews(response) {
var news = response[0];
console.log(news);
$news.append($div);
$div.attr('class', 'news' + 0);
$div.append($h1);
$div.append($h2);
$div.append($h3);
$div.append($p);
$h1.html(news.title);
$h2.html(news.author);
$h3.html(news.date);
$p.html(news.body);
for (var i = 1; i < response.length; i++) {
news = response[i];
$news.append($div.clone());
$div.attr('class', 'news' + i);
$div.append($h1);
$div.append($h2);
$div.append($h3);
$div.append($p);
$h1.html(news.title);
$h2.html(news.author);
$h3.html(news.date);
$p.html(news.body);
}
}
答
你的情况divs
的顺序是由于JavaScript的for循环的异步特性不恰当的。你可以做的是使用jQuery的是synchronous
$.each
功能,因此会给你所需的输出
您与$.each()
循环功能会像
function showNews(response) {
var news = response[0];
console.log(news);
$news.append($div);
$div.attr('class', 'news' + 0);
$div.append($h1);
$div.append($h2);
$div.append($h3);
$div.append($p);
$h1.html(news.title);
$h2.html(news.author);
$h3.html(news.date);
$p.html(news.body);
$.each(reponse, function(index, news){
if(index > 0) {
$news.append($div.clone());
$div.attr('class', 'news' + i);
$div.append($h1);
$div.append($h2);
$div.append($h3);
$div.append($p);
$h1.html(news.title);
$h2.html(news.author);
$h3.html(news.date);
$p.html(news.body);
}
})
}
这并不求解带的问题。现在我有4个div,但首先是空的。 – pawell67
我更新了代码,我觉得应该帮忙 –
不幸的是,div的顺序又是3-0-1-2。 – pawell67