循环遍历 JavaScript“getElementsByTagName()”对象

Question

如何正确循环从选择器上的“getElementsByTagName()”返回的对象。 我似乎无法正确处理。

例如，如果我有一堆这样的 div：

<div class="wrapper">
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
<div class="test1">this is a div</div>
<div class="test2">this is a div</div>
</div>

我想遍历“getElementsByTagName()”的结果，如下所示：

var wrapper = document.querySelector(".wrapper");

var divs = wrapper.getElementsByTagName("div");

for (i = 0; i < divs.length; ++i) {
   each = divs[i];
   if (each.classList.contains("test2")) {
    this.style.display = "none";
   }
}

这是一个小提琴： http : //jsfiddle.net/Y2Yzv/1/

Answer 1

控制台中有错误： Uncaught TypeError: Cannot set property 'display' of undefined

尝试：

var wrapper = document.querySelector(".wrapper");

var divs = wrapper.getElementsByTagName("div");

for (i = 0; i < divs.length; ++i) {
   each = divs[i];
   if (each.classList.contains("test2")) {
    each.style.display = "none";
   }
}

演示

Answer 2

each.style.display = "none"; 会工作而不是this

this指的是全局对象，而不是循环中迭代的元素。

这是纠正的小提琴：

http://jsfiddle.net/Y2Yzv/4/

Answer 3

更少代码解决方案

var divs = document.querySelectorAll('.wrapper div');
[].forEach.call(divs, function (div) {
    if (div.classList.contains('test2')) div.style.display = 'none';
});

Answer 4

改变this.style.display = "none"; to each.style.display = "none"

Answer 5

检查此解决方案： http ： //jsfiddle.net/ZffWg/

这些是我改变的主要变化

for (i in divs) {
    if (divs[i].className.indexOf("test2") > -1) {
        divs[i].style.display = "none";
    }
}

我删除了i=0 ，因此循环在数组索引本身上运行。

我还使用className而不是classList来实现更好的跨平台兼容性

Answer 6

 let divs_in_wrapper = document.querySelectorAll('.wrapper div'); divs_in_wrapper.forEach((item, index, arr) => { if (item.classList.contains("test2")) { item.style.display = "none"; } });

 <div class="wrapper"> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> <div class="test1">this is a div</div> <div class="test2">this is a div class test2</div> </div> <div class="test2">this is outside a div</div>