jQuery .each（）函數與ES6箭頭函數

Question

我有這個ES6代碼，在我編譯它與巴別到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); 
}); 

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

Answer 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();