Có thể trùng lặp:
Using .after() to add html closing and open tags
我想显示高度几乎相同的 3 列列表 (
),所以我正在计算
标签并使用append动态生成列表。但是当我这样做时$el.append($("
关闭当前列表并 append 一个新列表,如
。
我只是想关闭
标记并再次打开它。是 jQuery append()
函数以某种方式验证 DOM 结构?我怎样才能得到预期的结果?有更好的方法来实现这一目标吗?
HTML:
here the list will show
Jquery:
var $el = $("#mylist");
$el.empty(); // remove old options
$el.append($(""));
var j = parseInt(response.length/3);
var i = 0;
$.each(response, function(key, value) {
i++;
if(i%j==0){
$el.append($("
")).append($("").text(value.nombre));
}
else{
$el.append($("").text(value.name));
}});
预期结果:
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
//This is what I want to append
- Lorem Ipsum
- Lorem Ipsum
- Lorem Ipsum
我得到了什么:
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
首先,需要注意的是append
ing 是一个比设置 innerHTML
计算成本更高的操作在一个元素上。其次,需要注意的是,jQuery 通过 $('');
将 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] += '' + value.nombre + ''; // if nombre has invalid HTML, you need to escape it
});
var html = '';
document.getElementById('mylist').innerHTML = html;
Tôi là một lập trình viên xuất sắc, rất giỏi!