Javascript 与jquery.attr（attributeName，函数）等价的Vanilla js

我注意到jQuery

.attr（）

有一个变量，允许您为函数设置属性名：请参阅

我试图找到与此类似的普通js，但请注意，

setAttribute（）

函数只允许您将属性值设置为字符串：请参阅

更具体地说，我正在尝试将一个片段从jQuery转换为普通js：

$(function(){
  $('.stroke-double, .stroke-single').attr('title', function(){
    return $(this).html();
  });
});

---

jQuery的

.attr

带有一个函数，它对查询结果中的每个元素进行操作。等价物应该是

函数attriquiv（选择器、attr、setterFunction）{
document.querySelectorAll（选择器）.forEach（（el，i）=>{
el.setAttribute（attr，setterFunction.call（el，i，attr））//将`el`绑定到`this`
})
}
attriquiv（'.stroke-double、.stroke-single、'title'，函数（索引，attr）{
返回此.innerHTML
})

---

ES5版本

var elements=document.querySelectorAll（选择器）
Array.prototype.forEach.call（元素，函数（el，i）{
setAttribute（attr，setterFunction.call（el，i，attr））
})

我发现查看我使用的库的源代码很有教育意义，这样我就知道它们在做什么。如果查看您指向的文档，您可以看到发送一个函数会为jQuery对象中的每个元素调用该函数，将

this

设置为该元素，并将属性设置为函数的结果。如果您投了反对票（不是您@drmrbrewer），请留下评论，以便我可以改进答案。我当然没有否决（相反），但我必须稍微调整它，使其也适用于phantomjs（我在现代Chrome和稍微古老的phantomjs中运行此功能……您的答案适用于Chrome，但在phantomjs中被扼杀）。我删除了双箭头符号，并使用传统的

for

循环，而不是

forEach

。不过，这个答案非常有用。啊，是的，

NodeList.prototype.forEach

和arrow函数仍然相对较新。我将用一些备选方案更新答案