jquery $ .each是非阻塞的吗？

Question

$("<ol>").appendTo(some_div);
$.each(map, function(i,example){
  $("<li>" + example + "</li>").appendTo(some_div)
});
$("</ol>").appendTo(some_div);

预期: <ol><li>example1</li><li>example2</li></ol>

实际: <ol></ol><li>example1</li><li>example2</li>

知道为什么会这样吗？

Answer 1

您正在执行DOM操作而不是字符串操作.并且$("<ol>")已经创建了一个OL元素而不仅仅是一个包含的字符串<ol>.

您需要将LI元素附加到新创建的OL元素:

var ol = $("<ol>").appendTo(some_div);
$.each(map, function(i,example){
    $("<li>" + example + "</li>").appendTo(ol);
});

Answer 2

您应该将您的<li>参赛作品附加到您的<ol>.否则,您无法知道浏览器将如何处理您的代码.另外,你应该附加<ol></ol>而不是单独<ol>和</ol>.jQuery的.append和.appendTo不是字符串操作,那些正在修改页面的DOM树.

$("<ol></ol>").appendTo(some_div);
olelement = $(some_div).find("<ol>")
$.each(map, function(i,example){
  $("<li>" + example + "</li>").appendTo(olelement);
});