javascript - 如何通过childNodes使用for循环？

Question

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

你可以看到codepen：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

使用循环中的每个元素设置 z-index.style和迭代。i下面的示例在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;
}