Question

如何使用forEach填充HTML元素？在我下面的简单示例中，我试图用计数器“increment”填充每个DIV。我正在使用this.innerHTML来定位数组中的每个innerHTML。我知道我错过了一些东西，但我看不到它。

var myArray = document.getElementsByClassName('box');
	
myArray = Array.from(myArray);
	
myArray.forEach( (item, increment) => this.innerHTML = increment );

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-family: arial;
    color: white;
}
	
.box {
    margin: 0 0 10px;
    padding: 10px;
    background-color: blue;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 1

forEach正在传递item和increment作为参数。

this不会引用您的item，而是引用此范围内的全局窗口。您可以使用item.innerHTML参数设置item。

var myArray = document.getElementsByClassName('box');
	
myArray = Array.from(myArray);
	
myArray.forEach( (item, increment) =>  item.innerHTML = increment} );

body {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    font-family: arial;
    color: white;
}
	
.box {
    margin: 0 0 10px;
    padding: 10px;
    background-color: blue;
}

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

Answer 2

此代码可以使用：当使用forEach时，数组中的项是第一个参数。＆＃34;这＆＃34;是这个背景下的窗口。

var myArray = document.getElementsByClassName('box');
var arr = Array.from(myArray)
arr.forEach((item,counter)=>(item.innerHTML = counter))

如何使用forEach来填充HTML元素

2 个答案: