Question

如何使用 for 循环遍历 childNodes？

2020-06-10

4013

javascript nodelist child-nodes

我需要在 div 中的每个节点上动态设置 z-index（第一个节点 - 1，第二个节点 - 2，等等）。当我尝试在 childNodes 上使用“for”循环时，出现错误“Uncaught TypeError：无法设置未定义的属性‘zIndex’”。你能指出我的错误吗？

您可以查看 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

您可以像这样循环遍历结构。

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

Answer 3

使用 .style 设置 z-index，并在循环中的每个元素上迭代 i 。以下代码片段中的示例...

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>