您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

jQuery 插件開發：return this.each() 的真正含義

編輯：程式設計疑難解答

疑問：直接 return this 不行嗎？

書上說「維護鏈式調用」，但 this 本身就是 jQuery 物件，為何還要 .each()？

答案：each() 內部會遍歷集合並執行回調，最後回傳 this


// jQuery 核心原始碼簡化
$.fn.myPlugin = function(options) {
    return this.each(function() {
        // 這裡的 this 是「單一 DOM 元素」
        // 對每個元素做初始化、綁定事件等
        var $el = $(this);
        $el.data('myPlugin', new MyPlugin($el, options));
    });
    // each() 結束後回傳原始 jQuery 物件（this），保持鏈式
};

關鍵差異

寫法	行為	適用場景
`return this;`	直接回傳集合，不執行任何逐元素邏輯	單純包裝器、無需逐元素操作
`return this.each(...)`	遍歷每個元素執行回調，最後回傳集合	插件初始化、逐元素綁定、資料掛載

為什麼不直接在外層用 this 做循環？


// ❌ 錯誤示範：this 是 jQuery 集合，非單一元素
$.fn.badPlugin = function() {
    this.css('color', 'red'); // 這行其實會對集合所有元素生效，因為 css() 內部用 each()
    return this;
};

// ✅ 標準寫法：明確語意，未來好維護
$.fn.goodPlugin = function() {
    return this.each(function() {
        // 這裡可針對單一元素做複雜邏輯
        $(this).css('color', 'red');
    });
};

總結

this.each(fn) = 遍歷執行 fn + 回傳 this。
插件開發**慣例**用 return this.each(...)，確保：
1. 每個匹配元素都執行初始化邏輯。
2. 保持 jQuery 鏈式調用特性（$('.box').myPlugin().fadeIn()）。