Question

如何遍历从＆＃34; getElementsByTagName（）＆＃34;返回的对象？在选择器上正确。我似乎无法做到这一点。

例如，如果我有一堆像这样的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>

我希望循环来自＆＃34; getElementsByTagName（）＆＃34;像这样：

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";
   }
}

Demo

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";更改为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以获得更好的跨平台兼容性

循环使用JavaScript“getElementsByTagName（）”对象

5 个答案: