gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 23:28:02 25 4
gpt4 key购买 nike

我试图将每个跨度包装在一个容器中。为此,我使用了一个 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/

最佳答案

奇怪的部分原因是因为 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);

关于javascript - 将每个跨度包装在一个容器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34464440/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com