如何使用for循环遍历childNodes？

Question

我需要在 div 内的每个节点上动态设置 z-index（第一个节点 - 1，第二个 - 2，等等）。当我尝试在子节点上使用 "for" 循环时，出现错误 "Uncaught TypeError: Cannot set property 'zIndex' of undefined"。你能指出我的错误吗？

可以看到代码笔：https://codepen.io/pen/

HTML + JS:

<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

    var images = document.getElementById('blog__images').childNodes;
for (var i = 1; i < images.length; ++i) {
    images[i].style.zIndex = i;
}

Answer 1

元素内部的空白被认为是文本，文本被认为是节点。应跳过这些文本节点。

var images = document.getElementById('blog__images').childNodes;
// console.log(images);
for (var i = 1; i < images.length; ++i) {
    if (images[i] && images[i].nodeType != 3) {
      console.log("My node:" + images[i].nodeName);
      images[i].style.zIndex = i;
     } else {
      console.log("Skipping Extra node:" + images[i].nodeName);
     }
}

<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

Answer 2

在循环中的每个元素上使用 .style 和迭代 i 设置 z-index。下面的例子在 snippit 中...

images[i].style.zIndex = i; 就可以了。我已经直接使用类名选择了元素，不需要 childNode...

您可以打开浏览器控制台并在运行代码后检查每个节点的 CSS 属性。

以下代码片段的控制台一次运行：

let images = document.getElementsByClassName('image');
let imgZIndex;
for(let i = 0; i < images.length; i++){
imgZIndex = images[i].style.zIndex = i;
console.log(imgZIndex)
}

<div id="blog__images" class="blog__images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

Answer 3

您可以像这样遍历结构。

var images = document.getElementById('blog__images').childNodes;
for (var img : images) {
    images[img].style.zIndex = img;
}

如何使用for循环遍历childNodes？

How to use for loop through childNodes?

javascript

nodelist

child-nodes