我试图用for循环创建一些div。我使用.append()和.clone方法,但div的顺序是错误的。即使我在循环之前创建了div,在index.html中也会在最后一个div(类news3)之后生成第一个div(类news0),它应该是最后一个。我该如何解决这个问题?
$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);
}
}
答案 0 :(得分:0)
由于javascript for循环的异步性质,因此divs
的顺序不合适。您可以做的是在jquery中使用$.each
函数synchronous
,因此会为您提供所需的输出
$.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);
}
})
}