jquery $ .each是非阻塞的吗？

Question

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

expected: <ol><li>example1</li><li>example2</li></ol>

actual: <ol></ol><li>example1</li><li>example2</li>

Any idea why this happens?

Answer 1

You are doing DOM operations and not string operations. And $("<ol>") does already create an OL element and not just a string containing <ol> .

You need to append the LI elements to the newly created OL element:

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

Answer 2

You should append your <li> entries to your <ol> . Otherwise you can't know how browser is going to handle your code. Additionally, you should append <ol></ol> instead of separate <ol> and </ol> . jQuery's .append and .appendTo are not string operations, those are modifying page DOM tree.

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

Answer 3

This line

$("<ol>").appendTo(some_div);

isn't simply adding an open tag as you think it is. jQuery is building an ordered list element and adding it to some_div. Likewise, your $.each is appending list item elements to some_div, so they're ending up as siblings of the list. You need to append the list items to the list element.

Answer 4

I believe $("<ol>").appendTo creates the full <ol></ol> tag. Either append the li items to the OL you've created, or create a long string and then do one append. Append is an expensive operation, if you're going to have 10s or more list items you should do the latter.