Possible Duplicate:
Using .after() to add html closing and open tags
我想显示高度几乎相同的 3 列列表 ( <ul>
),所以我正在计算 <li>
标签并使用append动态生成列表。但是当我这样做时$el.append($("</ul><ul class='new'>"))
关闭当前列表并 append 一个新列表,如 <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>
最佳答案
首先,需要注意的是append
ing 是一个比设置 innerHTML
计算成本更高的操作在一个元素上。其次,需要注意的是,jQuery 通过 $('<ul />');
将 HTML 字符串(例如 document.createElement
)解析为 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;
关于jQuery append() 不添加 </ul><ul>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14697567/