循環遍歷 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>