jquery $ .each似乎是异步运行的？

Question

我正在编写一个开始div标记,然后使用$.each迭代一些JSON对象并将它们写入div.在$.each函数之后,我正在编写结束div标记.但是,在函数div内的东西$.each执行之前,结束标记被写入,我无法弄清楚原因.这是我的代码:

$("#articles").append("<div id='stories'>");

$.each(articles, function(i, val) {
    $("#articles").append("<div class='story'><h1><a href='"+val.url+"'>"+val.title+"</a></h1><div class='dateline'>"+date+"</div><div class='summary'>"+body+"</div></div>");
});

$("#articles").append("</div>");

Answer 1

它不是异步的.

所有这一切都发生在jQuery和浏览器拒绝允许你创建一个未闭合的元素.

每个DOM操作函数都必须保持DOM一致,所以在你的第一行中你实际上是在编写一个整体<div/>,然后还会附加以下内容#articles而不是新内部<div>.

试试这个:

var $stories = $('<div id="stories" />').appendTo('#articles');

$.each(articles, function(i, val) {
    $stories.append("<div class='story'><h1><a href='"+val.url+"'>"+val.title+"</a></h1><div class='dateline'>"+date+"</div><div class='summary'>"+body+"</div></div>");
});