我想显示具有几乎相同高度的3列列表(<ul>
),因此我计算<li>
标记并使用append动态生成列表。但是当我$el.append($("</ul><ul class='new'>"))
关闭当前列表并添加一个新列表时,它会追加<ul class='new'></ul>
。
我只想关闭<ul>
标记并再次打开它。 jQuery append()
函数是否以某种方式验证了DOM结构?如何获得指定的结果?有没有更好的方法来实现这个目标?
<div id="mylist">
here the list will show
</div>
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>
答案 0 :(得分:4)
$('</ul><ul>')
不会按照你的想法去做。它将尝试创建一个DOM元素,可能会导致<ul>
。
您必须构建所需的每个元素并将它们组合在一起,或者使用.html()
将html作为字符串进行操作。我绝对推荐第一个选项。
答案 1 :(得分:4)
首先,重要的是要注意append
比在元素上设置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;
答案 2 :(得分:4)
简单:
的 LIVE DEMO 强>
使用"strings"
来代替对象,在需要的地方设置</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 );