jQuery append() 不添加 </ul><ul>

Question

可能的重复：
使用 .after() 添加 html 关闭和打开标签

我想显示<ul>高度几乎相同的 3 列列表 ( )，因此我正在计算<li>标签并使用附加来动态生成列表。但是当我$el.append($("</ul><ul class='new'>"))关闭当前列表并附加一个新列表时，它会像<ul class='new'></ul>.

我只想关闭<ul>标签并再次打开它。jQueryappend()函数是否以某种方式验证 DOM 结构？我怎样才能得到预期的结果？有更好的方法来实现这一目标吗？

HTML：

<div id="mylist">
   here the list will show
</div>

jQuery：

var $el = $("#mylist");
$el.empty(); // remove old options
$el.append($("<ul class='new'>"));
var j = parseInt(response.length/3);
var i = 0;
$.each(response, function(key, value) {
  i++;
  if(i%j==0){
      $el.append($("</ul><ul class='new'>")).append($("<li></li>").text(value.nombre));
  }
  else{
     $el.append($("<li></li>").text(value.name));
  }});

预期结果：

<div >
   <ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new"> //This is what I want to append
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul>
</div>

我得到了什么：

<div id="mylist">
<ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul> 
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
</div>

Answer 1

首先，需要注意的是，与对元素append进行设置相比，ing 的计算成本要高得多。innerHTML其次，需要注意的是，jQuery$('<ul />');通过 .html 文件将 HTML 字符串（例如 ）解析为 DOM 元素document.createElement。换句话说，这不像连接字符串；而是连接字符串。您不能创建部分元素。

您想要的是使用原始字符串连接构建一个 HTML 字符串，然后通过innerHTML. 例如：

var colHTML = [];
var numPerCol = Math.ceil(response.length/3);
var i=0;
$.each(response, function(key, value) {
    var curCol = Math.floor(i / numPerCol);
    if (i % numPerCol == 0)
        colHTML[curCol] = '';
    colHTML[curCol] += '<li>' + value.nombre + '</li>'; // if nombre has invalid HTML, you need to escape it
});

var html = '<ul class="new">' + colHTML.join('</ul><ul class="new">') + '</ul>';
document.getElementById('mylist').innerHTML = html;