[英]Give the Array Items in a forEach method the value 'this' (javascript)
I'm using a forEach method on an array and I would like to make the array items have the value 'this'. 我在数组上使用forEach方法,我想使数组项的值为'this'。
When I change 'item' in the code below to = 'this' nothing happens. 当我在下面的代码中将“ item”更改为=“ this”时,什么也没有发生。
Is it possible to do this with the forEach method, or is what I'm trying to do just not possible? 是否可以使用forEach方法执行此操作,或者我尝试执行的操作只是不可能?
I've simplified the problem from the actual code I'm using so as not to add further complications (in the actual code the array items control a series scroll triggers and I need each one of these to have the value 'this'). 我已经从正在使用的实际代码中简化了该问题,以免增加进一步的复杂性(在实际代码中,数组项控制一系列滚动触发器,并且我需要每个这些触发器都具有值“ this”)。
In the example below I just need to use 'this' to change the background color. 在下面的示例中,我只需要使用“ this”来更改背景颜色。
Codepen link is here https://codepen.io/emilychews/pen/boJBKB Codepen链接在这里https://codepen.io/emilychews/pen/boJBKB
var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); var myArray = [div1, div2, div3] myArray.forEach(function(item) { item = this; this.style.backgroundColor = "blue"; })
.div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; }
<div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div>
You can set the value of this
in the callback, but you can't set it to a new item on each iteration. 您可以设置的值,
this
在回调,但不能将其设置为在每次迭代的新项目。 This would be unnecessary and redundant because the parameter exists for that purpose. 这将是不必要和多余的,因为为此存在参数。
in the actual code the array items control a series scroll triggers and I need each one of these to have the value 'this'
在实际代码中,数组项控制一系列滚动触发器,我需要每个滚动触发器都具有值“ this”
As to the actual situation you alluded to, you'll need to give more detail. 至于您提到的实际情况,您需要提供更多细节。 A separate function may be sufficient.
单独的功能可能就足够了。
var div1 = document.getElementById('div1'); var div2 = document.getElementById('div2'); var div3 = document.getElementById('div3'); var myArray = [div1, div2, div3]; myArray.forEach(function(item) { doStuff.call(item); }); function doStuff() { this.style.backgroundColor = "blue"; }
.div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; }
<div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div>
Here we use .call()
to invoke doStuff()
, so that the first argument to .call()
becomes the this
value of doStuff
. 这里我们使用
.call()
调用doStuff()
使第一个参数.call()
成为this
价值doStuff
。
Array.prototype.forEach
is different from jQuery
's each
function as forEach
passes the item from the array, the index of that item and the array itself to its callback function. Array.prototype.forEach
与jQuery
的each
函数都不同,因为forEach
将数组中的项目,该项目的索引以及数组本身传递给其回调函数。 So the callback is supposed to be like: 所以回调应该是这样的:
function(item, index, array)
And forEach
, unlike each
, doesn't pass the item as this
to its callback, so you have to use item
. 和
forEach
,不像each
,不会将项目作为传递this
给它的回调,所以你必须使用item
。 So, since you don't specify the this
parameter to forEach
and the function doesn't appear to be bound to any this
, the this
inside it will refer to window
. 因此,由于您没有为
forEach
指定this
参数,并且该函数似乎未与任何this
绑定,因此其中的this
将引用window
。
That beign said, your code should be: 那个良心说,您的代码应该是:
myArray.forEach(function(item){
item.style.backgroundColor = "blue";
// ^^^^ item is the current item from the array myArray
});
Note: 注意:
As mentioned by @newToJs, you could use document.getElementsByClassName
or document.querySelectorAll
to get the all divs in one go rather than getting them one by one using document.getElementById
: 如@newToJs所述,您可以使用
document.getElementsByClassName
或document.querySelectorAll
一次性获取所有div,而不必使用document.getElementById
一对一地获取它们:
var divs = document.querySelectorAll(".div"); // divs is not an array (it is a NodeList which is an array-like object) that does not have a forEach function (at least not in some older browsers), so we have to use .call of forEach like so [].forEach.call(divs, function(item) { item.style.backgroundColor = "blue"; });
.div { height: 50px; width: 50px; background-color: red; margin-bottom: 10px; }
<div class="div" id="div1"></div> <div class="div" id="div2"></div> <div class="div" id="div3"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.