I note that jQuery .attr() has a variant which allows you to set an attribute name to a function: see here.

I'm trying to find the plain vanilla js equivalent of this, but note that the setAttribute() function only appears to allow you to set an attribute value to a string: see here.

More specifically, I'm trying to convert a snippet from this article from jQuery to plain js:

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

I note that jQuery .attr() has a variant which allows you to set an attribute name to a function: see here.

I'm trying to find the plain vanilla js equivalent of this, but note that the setAttribute() function only appears to allow you to set an attribute value to a string: see here.

More specifically, I'm trying to convert a snippet from this article from jQuery to plain js:

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

• javascript
• jquery

Share Improve this question Follow asked Mar 4, 2019 at 22:08 drmrbrewerdrmrbrewer 13.2k2424 gold badges9898 silver badges212212 bronze badges 1

• 3 I find it educational to look at the source code of libraries I use so I know what they're doing. Here's the source for attr. If you look at the documentation you point to, you can see that sending a function calls that function for each element in the jQuery object, setting this to that element and setting the attribute to the result of the function. – Heretic Monkey Commented Mar 4, 2019 at 22:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

jQuery's .attr with a function operates on each element in the query result. The equivalent would be something like

function attrEquiv(selector, attr, setterFunction) {
  document.querySelectorAll(selector).forEach((el, i) => {
    el.setAttribute(attr, setterFunction.call(el, i, attr)) // bind `el` to `this`
  })
}

attrEquiv('.stroke-double, .stroke-single', 'title', function(index, attr) {
  return this.innerHTML
})

---

ES5 version

var elements = document.querySelectorAll(selector)
Array.prototype.forEach.call(elements, function(el, i) {
  el.setAttribute(attr, setterFunction.call(el, i, attr))
})