如何解决为什么使用JavaScript删除元素会阻止元素迭代?
| 我正在尝试用标签替换页面上的所有文本字段。function replaceInputTextFieldsWithValues() {
var inputFields = document.getElementsByTagName(\"input\");
for(var i = 0; i < inputFields.length; i++) {
if(inputFields[i].getAttribute(\"type\")== \"text\") {
var parent = inputFields[i].parentNode;
var value = inputFields[i].value;
parent.removeChild(inputFields[i]);
var label = document.createElement(\'label\');
label.setAttribute(\'for\',value);
label.innerHTML = value;
parent.appendChild(label);
}
}
}
我的HTML文档组织在表格中。该功能似乎仅在每个表的第一个元素上起作用。
另一方面,当我删除该行时:
parent.removeChild(inputFields[i]);
该代码似乎工作正常。为什么会发生这种情况,我该如何解决?
解决方法
从
getElementsByTagName
得到的回报是a3ѭ,这是实时的。这意味着,如果删除索引为0
的元素,则ѭ3的长度将减小,并且索引为0
的元素将是一个新元素,而不是刚刚删除的元素。
只需逐步解决它,您就可以了:
for(var i = inputFields.length - 1; i >= 0; i--) {
// ...
}
或者,将“ 3”转换为数组,然后循环遍历该数组。 (请参见下面的实时示例和代码)。
编辑:或者,正如Chris Shouts在评论中指出的那样,您可以只使用变化的just9ѭ,但这并不像Chris的建议那么简单,因为您有时只删除元素。它看起来像这样:
var inputFields = document.getElementsByTagName(\"input\");
var i = 0;
while (i < inputFields.length) {
if(inputFields[i].getAttribute(\"type\")== \"text\") {
// Remove it and DON\'T increment `index`
}
else {
// Skip this one by incrementing `index`
++index;
}
}
使用这三种方法中的哪一种取决于情况。复制到数组为您提供了一个不错的静态数据集,并且,如果您确保释放对ѭ3的引用,则可以使浏览器有机会意识到不必将列表保持不变,事态发生变化时,可以减少开销。但是您只是在简短地复制引用,这会增加一些开销。 :-)
附加:这是一个显示此效果的示例,还显示了一种从NodeList
创建数组的相当有效(但晦涩)的方法:
HTML:
<ul>
<li>LI0</li>
<li>LI1</li>
<li>LI2</li>
</ul>
JavaScript:
var lilist,liarray;
// Get the NodeList,which is live
lilist = document.getElementsByTagName(\'li\');
// Create an array of its elements
liarray = Array.prototype.slice.call(lilist,0);
// Show initial length of both
display(\"lilist.length = \" + lilist.length); // Shows 3
display(\"liarray.length = \" + liarray.length); // Shows 3
// Show what the 0th element of both is (both show \"LI0\" in the live example)
display(\"lilist[0].innerHTML = \" + lilist[0].innerHTML); // Shows LI0
display(\"liarray[0].innerHTML = \" + liarray[0].innerHTML); // Shows LI0
// Remove the first list item
display(\"Removing item 0\");
lilist[0].parentNode.removeChild(lilist[0]);
// Show the length of both,note that the list\'s length
// has gone down,but the array\'s hasn\'t
display(\"lilist.length = \" + lilist.length); // Shows 2,not 3
display(\"liarray.length = \" + liarray.length); // Still shows 3
// Show what the 0th element of both *now* is
display(\"lilist[0].innerHTML = \" + lilist[0].innerHTML); // Shows LI1 now
display(\"liarray[0].innerHTML = \" + liarray[0].innerHTML); // Still shows LI0
即时复制
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。