使用foreach遍历class元素
我将一个getElementsByClassName中的所有元素都存储到一个变量中，我想我可以循环这个变量来获取其中的每个it。但它不起作用。
var el = document.getElementsByClassName("machine_btn_over_layer");
el.forEach(test);
var test = function() {
console.log("test");
}<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
我做错了什么？我收到一个错误，说函数不工作
回答 3
Stack Overflow用户
发布于 2018-02-20 23:28:09
您需要进行两个更改。第一个数组是一个HTMLCollection，所以数组方法在这个问题上不起作用。因此，要使用数组方法，可以使用spread operator(...)将其转换为数组
其次，声明为var test = function() {}的函数永远不会被提升。所以当el.forEach被调用时，它不会得到函数，因此它会抛出undefined不是一个函数
var el = [...document.getElementsByClassName("machine_btn_over_layer")];
var test = function() {
console.log("test");
}
el.forEach(test);<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
Stack Overflow用户
发布于 2018-02-20 23:27:23
使用文档来帮助您！document.getElementsByClassName
名称变量elements =document.getElementsByClassName(
)
elements是找到的元素的活动HTMLCollection。
在HTMLCollection文档中，您应该注意到的第一件事是它没有一个名为forEach的方法。但是它确实有一个名为length的属性
HTMLCollection.length
返回集合中的项数。
和一个名为item的方法
将给定索引处的特定节点返回到列表中。如果索引超出范围，则返回null。
所以你应该能够做到这一点：
for (var i = 0; i < el.length; i++) test(el.item(i));或者使用阵列糖：
for (var i = 0; i < el.length; i++) test(el[i]);Stack Overflow用户
发布于 2018-02-20 23:27:24
并不是每个浏览器都在getElementsByClassName方法返回的HTMLCollection上实现Array.prototype方法。
此外，变量赋值不会提升。函数声明就是这样。
var el = document.getElementsByClassName("machine_btn_over_layer");
// manually call Array.prototype.forEach on HTMLCollection
Array.prototype.forEach.call(el, test);
// replace function expression with function declaration to hoist with value
function test() {
console.log("test");
}<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
<div class="machine_btn_over_layer"></div>
https://stackoverflow.com/questions/48888574
复制相似问题
腾讯云开发者
