1

我用 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>
4

4 回答 4

0

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

var profileDetailsChildren = document.getElementById("profile_details").childNodes;
for (var i=0; i<profileDetailsChildren.length; i++) {
    profileDetailsChildren[i].style.display = "block";
}
于 2013-01-31T19:12:53.200 回答
0

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

于 2013-01-31T19:13:59.990 回答
0

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

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. 但是，这些textNodes 没有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不包含textNodes 的集合：

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

jsFiddle的现场演示

于 2013-01-31T19:23:21.170 回答
0

似乎您只有 3 个childNodesin ，#profile_details因此在尝试访问style.undefined

您应该在控制台中看到这一点：

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

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

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

for (var i = 1, l = children.length; i < l; i++) {
    children [i].style.display = "block";
}

这将影响所有孩子，除了第一个孩子。如果您还希望第一个受此影响，则应从 0: 开始您的计数器var i = 0。

于 2013-01-31T19:10:49.303 回答