给定一个 dom 元素，我如何在 jquery 和/或 JavaScript 中将其展平？答案

【问题标题】：Given a dom element, how could I flatten it in jquery and/or JavaScript?给定一个 dom 元素，我如何在 jquery 和/或 JavaScript 中将其展平？
【发布时间】：2012-08-06 05:19:56
【问题描述】：

假设我从 dom 中获取了一个元素：

[<div id="generic-wrapper"> ... </div>]

如何将其展平以包含所有元素？

编辑：“generic-wrapper”是一个任意的 id，它可以是任何东西。它也可以嵌套，就像在包装器中的包装器中一样。

EDIT2：我希望最终数组包含原始数组的所有内容，只是展平。这包括包装器。是否有一种系统的方法来构建和遍历一个数组，例如我正在描述的数组？再次感谢并为造成的混乱道歉。

【问题讨论】：

你所说的“扁平化”是什么意思？
元素“包装器”包含其他元素。我希望它包含包装器内的所有元素以及其中的任何元素，而不是仅包含包装器的数组。
您希望返回的数组包含包装器元素吗？

标签： javascript jquery html dom cross-browser

【解决方案1】：

一次选择它们：

var $allElements = $("#wrapper,#wrapper *")

我不确定您是否要排除包装元素本身，但如果是，请使用"#wrapper *"。

【讨论】：

或$( '#wrapper' ).find( '*' ).andSelf() 以避免两次写入 ID 名称。
@ŠimeVidas - 我喜欢重复自己。我喜欢重复自己。

【解决方案2】：

更新：

“简单”解决方案：

var domElements = [<div id="generic-wrapper">...</div>];

$.merge( domElements, $(domElements).find('*'));

更好的解决方案：

听起来你想要做的是，给定一个 dom 元素数组，将它们的每个后代添加到数组中。如果您使用 jQuery 进行预期的 DOM 操作，您应该直接选择它们（如下面的代码示例所示）。这将返回一个 jQuery 对象，该对象具有可用于基本数组索引的底层数组结构。如果需要得到一个真正的数组，可以使用对象的.toArray()方法。不过，jQuery 对象通常更有用，因为您可以轻松操作所有匹配的元素（您也可以使用 .each() 遍历它们）。

选择#wrapper 及其所有后代（如果id 存储在变量中，请将'#wrapper' 替换为'#' + 变量名。）

var domElements = $('#wrapper, #wrapper *');

【讨论】：

这将排除#wrapper 本身！
@unloco 真的，没有意识到 OP 也想包含这个，问题不是很清楚。

【解决方案3】：

一个 HTML 字符串？

$('<div>').append($('#wrapper').clone()).html();

【讨论】：

【解决方案4】：

这是一个在展平选择时不必知道父选择器的 id 的方法：

var x = $('selector for the parent element');
var y = x.add($('*', x));

它是如何工作的：

假设你有一个这样的 html 结构：

<div id="foo">
  <ul>
    <li></li>
  </ul>
</div>

所以第一行，var x = $('#foo') 选择了包装器。

第二行var y = x.add($('*', x)) 将获取您选择的包装器，并向其中添加包装器中包含的每个元素的递归选择。最终结果如下所示：

[<div id="foo">...</div>, <ul>...</ul>, <li></li>]

【讨论】：

【解决方案5】：

这是一个 vanilla JS 解决方案。它接受一个 DOM 元素并返回一个列表。

function flatten(element) {
    const elements = [];
    for (let child of element.childNodes) {
        if (child.childElementCount == 0)
            elements.push(child)
        else
            elements.push(...flatten(child));
    }
    return elements
}

例如，这将采用如下 DOM 对象：

<svg>
  <g>
    <g>
      <polygon points="..."/>
      <polygon points="..."/>
    </g>
    <path d="..."/>
    <path d="..."/>
  </g>
</svg>

然后输出：

[<polygon>, <polygon>, <path>, <path>]

旁注：如果您需要的是在原地展平 DOM 对象的东西，请查看this gem。

【讨论】：