gpt4 book ai didi

javascript - .children 列表中的索引未按预期工作

转载 作者:搜寻专家 更新时间:2023-10-31 23:22:44 26 4
gpt4 key购买 nike

谁能解释一下给定 HTML 的原因

<body>
<div id="ustack1">
Block 1:
<div id="0"> 0 </div>
<div id="1"> 1 </div>
<div id="2"> 2 </div>
<div id="3"> 3 </div>
<div id="4"> 4 </div>
<div id="5"> 5 </div>
<div id="6"> 6 </div>
<div id="7"> 7 </div>
<div id="8"> 8 </div>
<div id="9"> 9 </div>
<div id="10"> 10 </div>
</div>

<div id="stagingDiv" style="display:inline-block;">
Block 2:
</div>
</body>

以及对应的javascript

var cards = document.getElementById("ustack1").children;

for(i=0;i<cards.length;i++){
document.getElementById("stagingDiv").appendChild(cards[i]);
}

(如本 jsfiddle 中所示:https://jsfiddle.net/73oszkj9/)

奇怪的元素被跳过了?

最佳答案

cards 是一个实时的 HTMLCollection。当您执行 appendChild 时,您将节点移动到 DOM 中的另一个位置,这会将它从集合中删除。一种解决方案是迭代卡片直到其长度为零:

while(cards.length > 0){
document.getElementById("stagingDiv").appendChild(cards[0]);
}

这是一个更新的 fiddle :https://jsfiddle.net/Lkvdep52/

如果它让您感觉好些,这是我们中的许多人曾经犯过的错误;-) 使用浏览器调试器是了解此类问题根本原因的好方法。

关于javascript - .children 列表中的索引未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37634030/

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