jQueryPlugin：返回 this 与返回 this.each()

Question

是的，有很多关于这个的话题，但我还是没听懂。

我准备了两个jsfiddle：

return this

return this.each()

有什么区别？ 有很多答案，但我的示例显示了相同的输出。那么其中一些答案可能是错误的！？

---

what does "return this.each()" do in jQuery?

“它允许在一堆元素上调用插件或事件，然后将相同的函数或事件应用于所有元素”--> 也适用于 return this

“它允许你链接多个函数”--> 此处相同

“允许您执行以下操作：$("mySelector").foo().show();”--> 当我使用 return this 时，我仍然可以执行此操作

---

我还创建了另一个 jsfiddle，它表明 - 在我看来 - 是否将代码包装到 return this.each(); 中并不重要：

http://jsfiddle.net/7S3MW/1/

Chrome 控制台显示相同的输出！

那么有什么区别呢？

Answer 1

两件事：

1. 您的示例存在缺陷，因为它们对每个元素执行完全相同的操作。
2. 真正的问题不是return this 与return this.each，问题是this 与this.each。

对于(1)，考虑一下这个插件的区别：

(function($) {
    $.fn.mangle = function(options) {
        this.append(' - ' + this.data('x'));
        return this;
    };
})(jQuery);

演示：http://jsfiddle.net/ambiguous/eyHeu/

还有这个插件：

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

演示：http://jsfiddle.net/ambiguous/5dMMH/

所以你看，如果你需要区别对待this 集合中的各个元素，你需要使用this.each。如果您的插件必须将特定于元素的数据附加到每个元素，您将获得类似的效果：如果您不使用each，那么您最终会将完全相同的数据附加到this 中的所有元素这只会让你对为什么信息到处流血感到困惑。

对于(2)，return this 或return this.each(... 无关紧要，因为x.each(...) 无论如何都会返回x。

Answer 2

让我向您展示两个“等效”的代码，可以澄清您的问题：

使用 jQuery “each”函数：

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(jQuery);

没有 jQuery “each” 函数：

(function($) {
    $.fn.mangle = function(options) {
        var objs = this;
        for (var i=0; i<objs.length; i++) {
            var obj = objs[i];
            $(obj).append(' - ' + $(obj).data('x'));
        };
        return this;
    };
})(jQuery);

所以，基本上，each 函数用于将一些代码应用于包含在 this 对象中的所有元素（因为this 通常指的是由 jQuery 选择器返回的一组元素 ) 并返回对this 的引用（因为each 函数总是返回该引用-以允许链接调用-）

附带说明：第二种方法 (-for loop-) 比前一种方法 (-@ 987654329@函数-）。

Answer 3

两者完全相同。 .each() 返回this，所以return this.each() 与this.each(); 完全相同return this;

编辑：您最新的 fiddle 的 makeRed 方法不返回 this，因此不可链接。