jQuery：如何将元素数组转换为原始HTML？

Question

假设我有这样一个数组：

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

我需要获取连接元素的标记。因此，我需要将content转换为原始字符串：<p>...</p><p>...</p>。

有什么简单的方法可以实现这一点吗？似乎框架中应该已经有类似的功能。

或者可以将content转换为文档片段，并在文档片段上调用.html()来获取标记？

- WingDingDang

---

我不太确定你在这里想要做什么。你是想简单地遍历数组并构建一个将数组元素连接在一起的字符串吗？如果是这样，你可能需要使用 $.each() 函数。如果我误解了你的意思，我很抱歉，因为你的意思对我来说并不是完全清楚的。 - Stephen

Answer 1

没有自动化的方法，但是你可以轻松地实现你刚才描述的功能。

试一下：http://jsfiddle.net/Y5x5z/

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

var container = $('<div/>');

$.each(content, function(i,val) {
    container.append(val);
});

alert(container.html());

• http://api.jquery.com/jquery.each/：该方法允许您迭代由jQuery对象表示的集合中的所有元素。
• http://api.jquery.com/append/：将指定内容附加到每个匹配元素集合的末尾。

- user113716

---

尝试使用 $.fn.append.apply($('<div>'), content).html()。 - Roman

Answer 2

这个答案比其他答案更简短，运行正确，而且不使用显式循环：

[$("<p>"), $("<p>")].map(function(el){return el.get()[0].outerHTML;})

正如Crazy Train在评论中指出的那样，可以进行以下优化：

var content = [ $('<p>...</p>'), $('<p>...</p>') ];

$.fn.toString = function() {
    return this[0].outerHTML
};

alert(content.join("")); // <p>...</p><p>...</p>

- user67416

---

.map()和$.each()一样都是循环。任何解决方案最终都会在某个级别上循环数组内容，但这里有一个技巧可以很好地隐藏它。http://jsfiddle.net/Y5x5z/4/ - user2437417

如果您的元素数组来自实际的 jQuery 集合（例如，$('li') 选择器的结果），则必须执行 $.makeArray(content).join('')。 - eon

Answer 3

我最近遇到了同样类型的任务，现在处理它的方法很简单：

const elements = [$('<p>...</p>'), $('<p>...</p>')];
const resultString = elements.reduce(
  (HTMLString, [element]) => HTMLString.concat(element.outerHTML),
  '',
);

请注意，在reduce中，HTMLString的默认值为''。这对于HTMLString是字符串类型很重要，以便能够将元素的HTML字符串连接到它上面。

- Virss

Answer 4

这是一篇旧帖子，可能会像我一样被偶然发现... 正确的方法是 .join()（标准 JavaScript 而非 jQuery）

var content = [ $('<p>...</p>').html(), $('<p>...</p>').html() ];

var concatenatedHTML = content.join('');

//concatenatedHTML would then be '<p>...</p><p>...</p>'

- aknosis

---

你真的试过运行这个吗？因为它不起作用。 - user67416

@g33kz0r，我想你是对的 - 我已经更新了它。这个解决方案并不理想，但现在它确实可以工作了。 - aknosis