连接 jQuery 对象答案

【问题标题】：concatenating jQuery objects连接 jQuery 对象
【发布时间】：2012-05-08 12:42:42
【问题描述】：

下面是我正在尝试做的原型。

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');

cmets 说明了一切。简而言之 - 这个想法是在插入数据时只修改一次文档 DOM。我通常会采用 HTML 字符串方法（简单地使用字符串连接相同的结构），但我很感兴趣是否有类似的方法也可以工作。

【问题讨论】：

Merging two jQuery selections的可能重复
不是重复的，因为我没有最初的“选择”，这本质上是主要问题。
然后创建一个空选择：var entry_set = $()。另请参阅Getting an empty JQuery object
@FelixKling，您应该将其发布为答案，因为这是我所询问的缺失部分。

标签： dom concatenation jquery

【解决方案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/

【讨论】：

【解决方案2】：

@Guy，我认为您不会获得所需的 HTML 输出。尝试使用“包装”。示例语法：

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

【讨论】：

【解决方案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');

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

【讨论】：