Fonction jQuery .each () avec les fonctions fléchées ES6

Question

J'ai ce code ES6, après l'avoir compilé avec Babel en ES5, le rappel de this à l'intérieur de .each Devient undefined. Comment résoudre ce problème?

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

Ma solution est de ne pas utiliser du tout this, mais d'utiliser les variables transmises à la fonction de rappel. Le premier est l'index et le second vous donne l'élément DOM lui-même.

 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);
 });

Answer 2

En effet, la moyenne de this n'est pas la même dans les fonctions fléchées.

ce

Les fonctions fléchées capturent cette valeur du contexte englobant,

La fonction each () transmet l'élément comme deuxième argument au rappel.

Mais une solution plus appropriée pour vous sera également d'utiliser . Map () au lieu de each ()

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