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

Question

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

我想展示三列列表（<ul>），并且它们的高度几乎相同，因此我正在计算 <li> 标记并使用 append 生成动态列表。但是当我执行 $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>

- Tomas Ramirez Sarduy

---

这种使用jQ进行格式化的方式仍然不被允许，但是有一种方法可以解决。 - Roko C. Buljan

.append 用于将节点附加到 DOM 中，而不是任意的 HTML 字符串。 - gen_Eric

$("</ul><ul class='new'>") 这句代码并不会产生你认为的效果。 - gen_Eric

“Spected?”这是什么意思？ - tckmn

@Doorknob 可能是“预期”的拼写错误。 - Popnoodles

Answer 1

首先要注意，与在元素上设置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;

- N Rohler

---

+1 感谢解释，代码运行正常，但我选择了 @roXon 的答案，因为代码更简单。 - Tomas Ramirez Sarduy

Answer 2

简单：

演示实例

不要使用对象，而是使用“字符串”在需要的地方设置 </ul><ul>。

var arr = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'];

var str = "<ul class='new'>";
for(var i=0; i<arr.length;) { 
              str += "<li>"+ arr[i++] +"</li>" ;  
  if(i%3===0) str += "</ul><ul class='new'>"   ;
}
str += "</ul>" ;

$("#mylist").html( str );

- Roko C. Buljan

---

这正是我正在寻找的，我承诺在这种任务中使用.html()而不是append()。 - Tomas Ramirez Sarduy

Answer 3

$('</ul><ul>')并不会做你想要的事情。它将尝试创建一个DOM元素，可能会导致出现<ul>。

您必须构建每个需要的元素并将它们组合在一起，或者使用.html()作为字符串对HTML进行操作。我强烈推荐第一种选项。

- keithjgrant

---

谢谢，我会尝试使用.html()看看会发生什么 ;) - Tomas Ramirez Sarduy

+1，但我选择了@roXon的答案，因为它更完整（还有代码）。 - Tomas Ramirez Sarduy