下面是我正在尝试做的事情的原型。
var entry_set = $;
// start to loop data
for([])
{
// create HTML element to represent that data
$('<div></div>')
.data([])
.addClass([])
.on([])
.insertAfter(entry_set);
}
// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');
评论说明了一切。简而言之 - 这个想法是在插入数据时只修改文档 DOM 一次。我通常会采用HTML字符串方法(简单地使用字符串连接相同的结构),但我对此类似的东西是否也有效感兴趣。
你可以创建一个空的 DOM 元素和 .append()
var entry_set = $("<div>"); //empty dom element
// start to loop data
var i = 4;
while(i--) {
// create HTML element to represent that data
var item = $('<div>', {
text: "test " + i
});
entry_set.append(item);
}
// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set.children());
工作演示: http://jsfiddle.net/F2J6g/1/
编辑您也可以从空集合开始并使用 .add()
var entry_set = $(); //empty collection
// start to loop data
var i = 4;
while(i--) {
// create HTML element to represent that data
var item = $('<div>', {
text: "test " + i
});
entry_set = entry_set.add(item);
}
// modify DOM only once all the entries are consolidated to a single jQuery object
$("body").append(entry_set);
http://jsfiddle.net/F2J6g/2/
>@Guy,我认为您不会获得所需的HTML输出。 尝试使用"换行"。示例语法:
$('.OuterDiv').wrap('<div class="abc" />');
不幸的是,由于这些对象实际上并不附加到任何层次结构,因此调用insertAfter
实际上没有任何意义。 你需要做的是把它们放在一个包含的div中,也许是这样的:
var entry_set = $('<div>');
// start to loop data
for([])
{
// create HTML element to represent that data
$('<div></div>')
.data([])
.addClass([])
.on([])
.appendTo(entry_set);
}
// modify DOM only once all the entries are consolidated to a single jQuery object
entry_set.appendTo('.entries');
我还没有测试过,但我认为它应该有效。