jQuery append（）不添加< / ul>< ul> [英] jQuery append() not adding </ul><ul>

问题描述

可能重复：

使用.after（）添加html关闭和打开标签

我想显示3个具有几乎相同高度的列列表（< ul> ），所以我在计算< li> 标记，并使用append动态生成列表。但是当我执行 $ el.append（$（< / ul>< ul class ='new'>））关闭当前列表并追加一个新的附加内容，例如< ul class ='new'>< / ul> 。

I want to show 3 columns lists (<ul>) with almost the same height, so I'm counting the <li> tags and use append to generate the list dynamically. But when I do $el.append($("</ul><ul class='new'>")) to close the current list and append a new one it appends like <ul class='new'></ul>.

我只想关闭< ul> 标记并再次打开它。 jQuery append（）函数是否以某种方式验证了DOM结构？如何获得指定的结果？

I just want to close the <ul> tag and open it again. Is jQuery append() function validating somehow the DOM structure? How can I get the spected result? Any better way to achieve this?

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

jQuery：

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));
  }});

预期结果：

Expected result:

<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>

我得到了什么：

What I got:

<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>

推荐答案

简单：

实时演示

用 strings 代替