Question

请考虑以下内容：

我有一个模板功能，可以生成一段HTML文本，并且我有一些简单的数据。

function template(item) {
    let HTML = `<div>`;
    HTML += `<span>${item}</span>`;
    HTML += `</div>`;
    return HTML;
}

var data = [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'baz' },
];

对于这些项目中的每一个，我都想创建一个jQuery克隆，因为将这些项目转换为实际的HTML元素（DOM节点）而不是纯文本对于我来说至关重要，所以我这样做：

var virtual_elements = [];

data.forEach(item => {
    let html = template(item.name);
    virtual_elements.push( $(html).clone(false) );
});

因此，我最终得到了一组DOM对象，并且以后每个对象都可以与$(target).append(element)或$(element).appendTo(target)结合使用。

但是，我要实现的目标是将所有对象都变成一个单个对象，该对象也可以附加到某个地方。

有没有一种方法可以创建可以添加到其中的空jQuery对象？我尝试了以下方法：

var final = $();

virtual_elements.forEach(item => {
    $(final).append(item);
});

或

var final = $();

virtual_elements.forEach(item => {
    $(item).appendTo(final);
});

但是这两个都导致一个空对象。

我也尝试过这个：

var final;

virtual_elements.forEach((item, index) => {
    if (index === 0) { final = item; }
    else { $(item).insertAfter(final) }
});

但是它导致对象中只有一个项目。

PS：将所有普通文本粘合在一起，然后使用$.parseHTML并不是我的选择，因为我需要在数据中的每个项目中运行jQuery方法，该方法仅适用于DOM节点，而不能用于纯文本文本。为了简单起见，我从代码中省略了这一点，但是一个简单的示例是（克隆元素之后）：

$(some-item).attr('src', '<iframe src="youtube.com/blabla" and some other unescaped single or double quotes here>');

编辑：很多简化的示例。

如果我有这个：

var one = $('<div><span>foo</span></div>').clone();
var two = $('<div><span>foo</span></div>').clone();
var three = $('<div><span>foo</span></div>').clone();

/// store these objects and do something with them.

稍后-如何将其变成单个jQuery对象，每个元素具有3个顶级键？等同于具有与执行此操作相同的最终结果：

var all = $('<div><span>foo</span></div><div><span>bar</span></div><div><span>baz</span></div>').clone();

解决方案：找到了一个解决方案，虽然不是最优雅的解决方案，但它确实可行。

data.forEach(item => {
    let html = template(item.name);
    virtual_elements.push( $(html).clone(false)[0] ); // add [0] store as plain javascript object here
    virtual_elements.push( $.parseHTML(html) ); // this also works
});

之后，创建最终对象：

var final = {};

elements.forEach((item, index) => {
    final[index] = item;
});

，您可以使用$(final).replaceWith(target)或$(target).append(final)

之类的方法

将jQuery克隆的虚拟元素数组转换为单个对象

0 个答案: