2

Let's say I get an element from the dom:

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

How could I flatten it to include all elements inside?

EDIT: "generic-wrapper" is an arbitrary id, it could be anything. It could also be nested, as in wrappers within wrappers.

EDIT2: I want the final array to include all of the content of the original array, just flattened. This includes the wrapper. Is there a systematic way to construct and iterate through an array such as the one I am describing? Thanks again and apologies for the confusion.

4

5 回答 5

4

一次全选：

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

我不确定您是否要排除包装元素本身，但如果是这样，只需使用"#wrapper *".

于 2012-08-09T01:55:49.767 回答
3

更新：

“简单”的解决方案：

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

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


更好的解决方案：

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

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

var domElements = $('#wrapper, #wrapper *');
于 2012-08-09T01:55:04.267 回答
0

An HTML string?

$('<div>').append($('#wrapper').clone()).html();
于 2012-08-09T01:53:19.430 回答
0

这是您在展平选择时不必知道父选择器的 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>]
于 2016-04-03T17:17:03.437 回答
0

这是一个香草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 对象的东西，请查看此 gem。

于 2021-10-05T19:55:34.600 回答