[英]Looping through JavaScript "getElementsByTagName()" object
How can I loop through an object returned from "getElementsByTagName()" on a selector correctly.如何正确循环从选择器上的“getElementsByTagName()”返回的对象。 I can't seem to get it right.
我似乎无法正确处理。
For example, if I have a bunch of divs like this:例如,如果我有一堆这样的 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>
and I want to loop through the results from a "getElementsByTagName()" like this:我想遍历“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";
}
}
and here's a fiddle : http://jsfiddle.net/Y2Yzv/1/这是一个小提琴: http : //jsfiddle.net/Y2Yzv/1/
You have an error in the console: Uncaught TypeError: Cannot set property 'display' of undefined
控制台中有错误:
Uncaught TypeError: Cannot set property 'display' of undefined
Try: 尝试:
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";
}
}
each.style.display = "none";
would work instead of this
会工作而不是
this
this
refers to the global object, and not to the element being iterated in your loop. this
指的是全局对象,而不是循环中迭代的元素。
Here is corrected fiddle: 这是纠正的小提琴:
Less code solution: 更少代码解决方案
var divs = document.querySelectorAll('.wrapper div');
[].forEach.call(divs, function (div) {
if (div.classList.contains('test2')) div.style.display = 'none';
});
Change this.style.display = "none";
改变
this.style.display = "none";
to each.style.display = "none"
to
each.style.display = "none"
Check this solution: http://jsfiddle.net/ZffWg/ 检查此解决方案: http : //jsfiddle.net/ZffWg/
These are the main changed I've made 这些是我改变的主要变化
for (i in divs) {
if (divs[i].className.indexOf("test2") > -1) {
divs[i].style.display = "none";
}
}
I removed the i=0
and so the loop runs on the array index itself. 我删除了
i=0
,因此循环在数组索引本身上运行。
I also used className
instead of classList
for better cross-platform compatibility 我还使用
className
而不是classList
来实现更好的跨平台兼容性
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.