Question

我在JavaScript中为大学项目编写了一个循环，用于设置多个元素的样式值：

for (var i=1; i<6; i++) {
    document.getElementById("profile_details").childNodes[i].style.display =
    "block";
}

我的问题是循环只迭代两次，通过警告'i'的值来证明;而不是期望的五次。

然而，随着循环中的语句被注释掉，循环确实迭代了正确的次数，所以我假设语句存在问题会导致循环表现得如此奇怪...

非常感谢任何回复/建议

修改

感谢所有快速回复，这里是profile_details元素，显示有超过3个子元素：

    <ul id="profile_details">
        <li>Artist</li>
        <li style="display:none;">Address: </li>
        <li style="display:none;">City: </li>
        <li style="display:none;">Postcode: </li>
        <li style="display:none;">Telephone: </li>
        <li style="display:none;">Website: </li>
    </ul>

Answer 1

您childNodes中似乎只有#profile_details，因此在尝试访问style的{{1}}时会出现TypeError。

你应该在你的控制台中看到这个：

TypeError：无法读取未定义的属性“样式”

您应首先检查它有多少个孩子，然后将您的循环设置为该数量：

undefined

这会影响所有的孩子，除了第一个孩子。如果您还希望第一个受此影响，则应从0开始计数：var children = document.getElementById("profile_details").childNodes; for (var i = 1, l = children.length; i < l; i++) { children [i].style.display = "block"; }。

Answer 2

您确定profile_details元素至少有5个孩子吗？你可能应该这样做，为了性能和正常工作：

var profileDetailsChildren = document.getElementById("profile_details").childNodes;
for (var i=0; i<profileDetailsChildren.length; i++) {
    profileDetailsChildren[i].style.display = "block";
}

Answer 3

该元素有多少个子节点？（document.getElementById("profile_details").childNodes.length会告诉你）。很可能只有3.尝试访问不存在的数组元素会产生错误。

Answer 4

如果您不知道元素有多少个子节点，可以像这样迭代：

var elems = document.getElementById("profile_details").childNodes;
for (var i=1; i<elems.length; i++) {
    elems[i].style.display = "block";
}

请确保，还要注意，elems中的第一个元素是elems[0]，（或者您可能需要将第一个元素留在迭代中）。

修改

较新的浏览器还将childNodes集合中的标记（包括空白字符和换行符）之间的所有字符都包含为textNode。但是，这些textNode没有style属性，因此浏览器会抛出错误并且您的循环失败。如果当前节点的类型对样式有效，则需要检查：

var elems = document.getElementById("profile_details").childNodes; for (var i=1; i<elems.length; i++) { if (elems[i].nodeType === 1) { elems[i].style.display = "block"; } }

另一种方法是使用children集合，该集合不包含textNode：

var elems = document.getElementById("profile_details").children;

jsFiddle
的现场演示

我脚本中的循环迭代不正确

4 个答案: