web-dev-qa-db-ja.com

ES6矢印関数を含むjQuery .each（）関数

このES6コードは、BabelでES5にコンパイルした後、.each内のthisのコールバックがundefinedになります。この問題を修正するにはどうすればよいですか？

let mediaBoxes = $(".now-thumbnail");
let titles = [];
mediaBoxes.each(() => {
      let obj = {
              index: i,
              title: $(this).find(".now-thumbnail-bottomtext").text().trim()
           };
  titles.Push(obj);
});
javascriptjqueryecmascript-6babeljs
26
Tekeste Kidanu

私の解決策は、thisをまったく使用せず、コールバック関数に渡される変数を使用することです。 1つ目はインデックスで、2つ目は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);
 });
38
Tekeste Kidanu

これは、thisの平均が矢印関数で同じではないためです。

this

矢印関数は、囲んでいるコンテキストのthis値をキャプチャします。

each（） 関数は、コールバックへの2番目の引数として要素を渡します。

しかし、より適切な解決策は、 each（） の代わりに 。map（） も使用することです

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