在JavaScript中，jQuery的each()函数的替代品是什么？
在JavaScript中，jQuery的each()函数的替代品是什么？
提问于 2016-11-29 05:07:42
在jQuery中，我们有一个函数，每个函数如下
$('button').each(function(i) {
$('button').eq(i).css('background', 'red');
});我们如何用普通的JavaScript替换这段代码？
回答 4
Stack Overflow用户
发布于 2016-11-29 05:15:48
您可以使用函数getElementsByTagName()，它在DOM中查询某个标记的元素并返回一个元素集合。您可以在document上调用此函数，也可以更具体地使用document.getElementById()选择一个元素，然后在该元素中查找标记。
无论采用哪种方法，一旦有了元素集合，就可以循环遍历该集合并相应地应用样式。
//query the document for all <button> elements
var buttons = document.getElementsByTagName('button');
/* -- OR -- */
//query the document for all buttons inside of a specific element
var container = document.getElementById('container');
var buttons = container.getElementsByTagName('button');
//loop over the collection of buttons and set each background to 'red'
for(var i=0; i<buttons.length; i++) {
buttons[i].style.background = "red";
}编辑:我意识到这不是jQuery的每个函数工作原理背后的JS。OP并没有明确表示他希望看到这一点，只是想通过JS来实现$.each()功能(因为有很多可能性)。这个例子只是使用了一个非常基本的概念的简单方法。
Stack Overflow用户
发布于 2016-11-29 05:13:09
var buttons = document.querySelectorAll("button");
for(var x in buttons){
var e = buttons[x];
e.innerHTML="stuff";
}正如squint指出的，它应该是buttonsx和var x。抱歉。
Stack Overflow用户
发布于 2016-11-29 05:33:50
因为它不使用forEach，所以被更多的浏览器支持。
如果使用getElementsByTagName，请将该函数添加到HTMLCollection。
HTMLCollection.prototype.each = function(callback){
for(var i=0; i<this.length; i++) callback(this[i]);
};
document.getElementsByTagName('div').each(function(div){
div.innerHTML = "poo";
});如果使用querySelectorAll，则可以将相同的函数附加到NodeList
NodeList.prototype.each = function(callback){
for(var i=0; i<this.length; i++) callback(this[i]);
};
document.querySelectorAll('div').each(function(div){
div.innerHTML = "podo";
});为了安抚呼喊者(参见注释)，我将指定如果这是用于您正在编写的库，或者如果它将与可能覆盖它的库一起使用，显然您会想要考虑其他方法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40853501
复制相关文章
相似问题
腾讯云开发者
