jQuery .each() function with ES6 arrow functions [duplicate]

Question

I have this ES6 code, after I compile it with Babel to ES5 the this inside .each's call back becomes undefined. How do I fix this problem?

let mediaBoxes = $(".now-thumbnail");
let titles = [];
mediaBoxes.each(() => {
      let obj = {
              index: i,
              title: $(this).find(".now-thumbnail-bottomtext").text().trim()
           };
  titles.push(obj);
});

Answer 1

That is because the mean of this is not the same in arrow functions.

this

Arrow functions capture the this value of the enclosing context,

The each() function passes the element as the second argument to the callback.

But a more appropriate solution for you will be to also use .map() instead of each()

let mediaBoxes = $(".now-thumbnail");
let titles = mediaBoxes.map((i, el) => {
  return {
    index: i,
    title: $(el).find(".now-thumbnail-bottomtext").text().trim()
  };
}).get();