javascript - 将每个跨度包装在一个容器中

Question

我试图将每个跨度包装在一个容器中。为此，我使用了一个 for 循环来创建多个容器，然后将跨度追加到同一索引的容器中。

为什么我的逻辑不起作用？

Html:两个 span 标签(抱歉 html 代码不会显示)

Javascript:

var spans = document.getElementsByTagName('span'),
    body = document.getElementsByTagName('body')[0];

for(var i = 0; i < spans.length; i++)
{
      var container = document.createElement('figure');
      container.setAttribute('class', 'container');
      body.appendChild(container);
      container.appendChild(spans[i]);
} 

编辑:https://jsfiddle.net/tsrLutpg/1/

Answer 1

奇怪的部分原因是因为 HTMLCollection设置为 spans是“直播”。这意味着，当您修改 <span> ，集合发生变化以反射(reflect)该变化。

在这种情况下，集合将顺序更改为 <span> s 列在中。在迭代时，有些可能会从一个 <figure> 开始被包裹两次。到另一个，而其他人在移动到已经访问过的索引时可能保持不变。

<span>Foo</span>
<span>Bar</span>
<span>Baz</span>

for (var i = 0; i < spans.length; i++)
{
    // ...
    console.log(Array.from(spans).map(s => s.outerHTML));
    container.appendChild(spans[i]);
}
// ["<span>Foo</span>", "<span>Bar</span>", "<span>Baz</span>"] (1 2 3)
// ["<span>Bar</span>", "<span>Baz</span>", "<span>Foo</span>"] (2 3 1)
// ["<span>Bar</span>", "<span>Foo</span>", "<span>Baz</span>"] (2 1 3)

---

您可以通过创建 <span> 的静态集合来避免这种情况s 进行迭代，这不会像 <span> 那样改变改变。

在现代浏览器中，您可以使用 Array.from() 为此(类似于上面的代码片段)。

var spans = Array.from(document.getElementsByTagName('span'));

https://jsfiddle.net/394La14t/

---

为了兼容性，MDN offers a polyfill您可以使用。或者，您可以调用 .slice() 相反。

var spans = Array.prototype.slice.call(document.getElementsByTagName('span'), 0);