Question

我将HTML代码附加到div中，它是一个无序列表。所以我先做：

$('.placeholder').append('<ul>');

这可以按预期工作。然后我为列表项做了一个循环：

$.each(headings, function(index, heading){
    $('.placeholder').append('<li>' + heading + '</li>');
})

然后追加结束ul标签

$('.placeholder').append('</ul>');

问题是代码如下：

<ul></ul>
<li></li>
<li></li>
<li></li>

为什么在编写代码时在每个循环的开头追加结束ul标记，以便之后附加？

Answer 1

您无需执行.append('</ul>');。 .append('<ul>');已将完整的ul node添加到HTML。

另外，您需要在lis内添加ul，而不是.placeholder内：

$.each(headings, function(index, heading){
    $('.placeholder ul').append('<li>' + heading + '</li>');
})

Answer 2

附加起始和结束标记：

$('.placeholder').append('<ul></ul>');

然后将<li>的添加到您的<ul>内：

$.each(headings, function(index, heading) {
    $('.placeholder ul').append('<li>' + heading + '</li>');
})

Answer 3

使用地图代替将结果全部追加到最后。

var $ul = $('<ul>');

$ul.append(
  $.map(headings, function(element){
    return '<li>' + element + '</li>';
  })
);

$('.placeholder').append($ul);

jQuery在循环后附加HTML标记

3 个答案: