Question

我正在尝试更改具有相同类名的三个元素的类名。但是，当我遍历我的for-loop数组时，每次迭代都会减小数组的大小。因此，我无法更改所有三个元素的类名。请有人建议。我完全失去了。

的javascript

 var i;

 for(i=0; i < toAssignArray.length; i++){
        console.log('size of aaray: '+ toAssignArray.length);
        console.log('id in array ['+ i +']: ' + toAssignArray[i].id);

        toAssignArray[i].className = 'toAssignOff';

        console.log('className of ['+i+']' + toAssignArray[i].className);

            }

HTML

 <div id="toAssign_thanhphan_618" class="toAssign" onclick="pcoment.assignThisAuthor('thanhphan', 'reply_618', '740')" style="display: inline;">Assign Comment</div>

 <div id="toAssign_jimmywhite_618" class="toAssign" onclick="pcoment.assignThisAuthor('jimmywhite', 'reply_618', '740')">Assign Comment</div>

 <div id="toAssign_anquoc_618" class="toAssign" onclick="pcoment.assignThisAuthor('anquoc', 'reply_618', '740')">Assign Comment</div>

控制台

[Log] size of aaray: 3 (pub_comments.js, line 604)
[Log] id in array [0]: toAssign_thanhphan_618 (pub_comments.js, line 606)
[Log] className of [0]toAssign (pub_comments.js, line 610)
[Log] size of aaray: 2 (pub_comments.js, line 604)
[Log] id in array [1]: toAssign_anquoc_618 (pub_comments.js, line 606)

Answer 1

你没有数组，你有一个 NodeList 。从许多DOM API中，NodeList实例是 live ，这意味着当它们中的元素发生变化时，它们会动态变化。例如，如果您执行.getElementsByClassName()，如果更改列表中的元素使其不再具有相关的类名，则它会立即从列表中消失。

有两种方法可以解决这个问题。首先，您可以将NodeList转换为真实数组。在现代（ES2015）JavaScript中，这非常简单：

var realArray = Array.of(nodeList);

在ES5中，它并不难：

var realArray = Array.prototype.slice.call(nodeList, 0);

第二种选择是以不同的方式遍历列表。不使用带有索引变量的for循环，而是使用while循环并仅对第一个元素进行操作：

while (nodeList.length) {
  nodeList[0].className = ""; // or whatever
}

当然，只有当您正在做的总是要从列表中删除元素时才有效。如果没有，那么我更喜欢使用“真实阵列”方法。

我想~~第五个~~第三种选择是使用不同的API，不返回实时NodeList。 .querySelectorAll()函数是一个通用API，它可以找到DOM节点但不返回实时列表（它仍然是NodeList，但它不是实时的）。因此，不是.getElementsByClassName()而是使用

var nodeList = document.querySelectorAll(".the-class-name");

Answer 2

通过更改节点列表来解决迭代的另一种标准方法是向后循环：

  for(i=toAssignArray.length-1 ; i >=0; i--){...

Javascript：我的数组的大小随着每个for循环迭代而减小。为什么？

2 个答案: