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

Question

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

我希望显示高度几乎相同的3列列表(<ul>)，因此我将对<li>标记进行计数，并使用追加来动态生成列表。但是，当我执行$el.append($("</ul><ul class='new'>"))关闭当前列表并追加一个新列表时，它会追加一个类似于<ul class='new'></ul>的列表。

我只想关闭<ul>标记并再次打开它。jQuery append()函数是否在某种程度上验证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

$('</ul><ul>')不会按你的想法去做。它将尝试创建一个DOM元素，可能会产生一个<ul>。

您必须构建所需的每个元素并将它们组合在一起，或者使用.html()作为字符串对html进行操作。我绝对推荐这些方案中的第一种。

Answer 2

首先，需要注意的是，appending比在元素上设置innerHTML要昂贵得多。其次，需要注意的是，jQuery通过document.createElement将HTML (例如$('<ul />'); )解析为DOM元素。换句话说，它不像连接一个字符串；您不能创建部分元素。

您需要的是构建一个带有原始字符串连接的HTML，然后通过innerHTML将其转储到DOM中。例如：

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;