Question

所以基本上我正在制作待办事项清单来练习使用纯Javascript。我不想使用Jquery。最终我想使用Jquery重新创建它。

我目前的问题是，当我在第43行（jsfiddle）上运行for循环时，它只删除所有其他复选框，当我想要打开和关闭所有这些复选框时。对不起，如果我的代码容易理解。这是我第一次尝试创造这么复杂的东西。

Websocket session

要查看我的问题，请添加一些项目，保存每项，然后点击几次编辑。

http://jsfiddle.net/whsn1bom/31/

请留下任何建议/意见！谢谢！

Answer 1

因为当您移除该项目时，其他项目会向下移动一项。这是一个现场收藏。向后循环或使用while循环。

for (var x = findSpanBoxes.length-1 x>=0; x--) {

或

var boxes = document.getElementsByClassName("box");
while (boxes.length) {
    var box = boxes[0];
    box.parentNode.removeChild(box);
}

Answer 2

你在这一行有一个逻辑缺陷

for (x = 0; x < findSpanBoxes.length; x++) {

将迭代更改为以下内容，它将起作用

for (x = findSpanBoxes.length-1; x >=0; x--) {

这是因为从列表中删除子项目项时，每个元素的索引减1。通过从列表末尾删除项目（即在最高索引处），剩余项目的内容不会改变。

例如，假设您有项目(index 0 = A, index 1 = B; index 3 = C; index 4 = D).

第一个循环（x = 0）删除项目0（A），新列表变为(index 0 = B, index 1 = C; index 2 = D)。删除第一个元素导致其余项目的内容发生变化。
第一个循环（x = 1）删除项目1，即C.注意B被跳过，因为它的索引从1变为0。

Answer 3

您是否检查过控制台是否有错误？

Uncaught TypeError: Cannot read property 'parentNode' of undefined

问题是你在循环中调用了document.getElementsByClassName("box")。为什么这是一个问题？好吧，你也要删除循环内的项目。每次删除项目时，document.getElementsByClassName("box")数组都会变短，因为它只返回执行时存在的项目（并且您在调用之间删除项目）。

为了帮助解释这一点，请以这种方式思考。第一次通过循环，删除.box的第一个索引。然后，在下一次迭代中，您正在创建一个新数组，并且您正在删除第二个索引。因此，你刚跳过一个盒子。

因此，要解决这个问题，您可以随时删除数组的第一个索引。

var box = document.getElementsByClassName("box")[0];

或者，您可以获取父对象，并以此方式删除.box元素。

var box_parent = document.getElementsByClassName("spanBox")[x];
box_parent.removeChild(box_parent.firstChild);

Answer 4

当epascarello的答案暗示时，getElementsByClassName会返回HTMLCollection这是一个真人集合;对DOM的更改会自动立即反映在其中。

正如他的回答所说，向后迭代数组避免了从DOM中删除项目的副作用。另一个解决方案是convert the array-like HTMLCollection into an array：

var boxes = [].slice.call(document.getElementsByClassName("box"));

这会使boxes成为一个真正的数组而不是一个类似实时数组的对象。对DOM的更新不会改变数组的长度，因此您仍然可以向前遍历数组。

如果您使用的是转发器或仅针对支持ES6的浏览器，则可以使用扩展运算符将阵列转换缩短为：

var boxes = [...document.getElementsByClassName("box")];

Javascript for循环每隔一段时间都有效

4 个答案: