更改某些元素的类名

Question

我想将类hidden的所有元素更改为类appeared。这是我的代码：

e = document.getElementsByClassName("hidden");
for (i = 0; i < e.length; i++) {
    e[i].className = "appeared";
}

三个名为hidden的类中的两个元素已更改。这是为什么？怎么解决？我尝试使用getElementById，它可以工作，但我需要使它一般，所以我可以将它用于许多元素和许多类。

修改

原来有一个类似问题的主题。我将代码更改为此代码并且有效：

e = document.getElementsByClassName("hidden");
while (e.length) {
    e[0].className = "appeared";
}

Answer 1

问题是getElementsByClassName会返回NodeList，这是live collection。因此，每次询问其长度时，都会重新计算集合。由于您已经为某些元素更改了className，因此循环比您预期的更早结束。

如果您为每个循环检查i和length的值，您将拥有：

• 第一次，长度为3.（0 <3） true ，因此更改了其类别。
• 第二次，长度为2.（1 <2） true ，因此更改其类别。
• 第一次，长度为1.（2 <1） false 。它没有改变它的等级。

您应该将NodeList转换为数组：

var e = [].slice.call(document.getElementsByClassName("hidden"));

或者您可以使用您提供的替代代码，但在这种情况下，每次询问其长度属性时都会重新计算选择。

Answer 2

为什么不使用jQuery并使用show（）和hide（）方法：

显示类名为“hidden”的所有元素：

$('.hidden').show();

隐藏所有类别为“hidden”的元素：

$('.hidden').hide();

要包含jQuery，请在body标记的末尾添加此脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 3

原始代码失败的原因是getElementsByClassName会在类hidden的元素上返回实时视图。因此，当您更改循环中元素的类时，此更改将反映在视图中，并且该元素将不再存在。

以下是一个示例场景：

1. e最初包含3个hidden元素。
2. 在第一次迭代中，i == 0和e[0]更改为不再 hidden。这意味着e现在只包含2个hidden元素，因为“旧”e[0]已被删除。
3. 在第二次迭代中，i已经在1，但e[0] 仍然一个hidden元素。这意味着您将跳过e[0]（循环前为e[1]）。在此迭代中，您将删除e[1]（之前为e[2]）的类，视图将减少为1个元素。
4. 由于i（= 2）现在超过e.length（= 1），因此循环终止。

最终结果是您跳过旧的e[1]。有两种方法可以解决这个问题：

• 首先将其内容复制到另一个数组，使e成为静态。这是大多数库（如jQuery）采用的方法。
• 使用活跃。正如您在编辑中所展示的那样，您可以使用实时收藏。通过始终在视图中的当前第一个元素上操作，您永远不会跳过任何元素。循环条件也很简单：你只需要继续迭代，直到视图不再包含任何元素。