Question

以下是我想要做的原型。

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字符串方法（简单地使用字符串连接相同的结构），但我感兴趣的是，与此类似的东西是否也可以。

Answer 1

你可以创建一个空的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/

Answer 2

@Guy，我认为你不会得到所需的HTML输出。尝试使用“换行”。示例语法：

$('.OuterDiv').wrap('<div class="abc" />');

Answer 3

不幸的是，因为这些对象实际上并未连接到任何层次结构，所以调用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');

我还没有测试过，但我认为它应该可行。

连接jQuery对象

3 个答案: