Функция jQuery.each() с функциями ES6 arrow

У меня есть этот код ES6, после того как я скомпилирую его с Babel на ES5, this внутри .each обратный вызов становится undefined. Как исправить эту проблему?

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

Ответ 1

Мое решение состоит в том, чтобы не использовать this вообще, но использовать переменные, которые передаются функции обратного вызова. Первый - это индекс, а второй - сам элемент DOM.

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

Ответ 2

Это потому, что среднее значение this не совпадает с функциями стрелок.

this

Функции стрелок фиксируют это значение окружающего контекста,

Функция each() передает этот элемент в качестве второго аргумента для обратного вызова.

Но более подходящим решением для вас будет также использовать .map() вместо each()

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