jQueryPlugin：返回此vs返回this.each（）

Question

是的，有很多关于此的主题，但我仍然没有得到它。

我准备了两个jsfiddle：

return this

return this.each()

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

---

  

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

“它允许一个人在一堆元素上调用插件或事件，然后将相同的函数或事件应用于所有元素” - ＆gt;与return this一起工作

“它允许您链接多个功能” - ＆gt;同样在这里

“允许您执行以下操作：$("mySelector").foo().show();” - ＆gt;当我使用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.each集中的各个元素，则需要使用this。如果你的插件必须将元素特定的数据附加到每个元素，你会有类似的效果：如果你没有使用each那么你最终会将完全相同的数据附加到this内的所有元素{1}}这只会让你对为什么信息在整个地方流血感到困惑。

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

Answer 2

让我告诉你两个＆＃34;等同的＆＃34;可以澄清你的问题的代码片段：

使用jQuery＆＃34;每个＆＃34;功能

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

没有jQuery＆＃34;每个＆＃34;功能

(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对象中包含的所有元素（ as this通常是指一组元素返回的jQuery选择器）并返回对this的引用（ as each函数始终返回该引用 - 允许链接调用 - ）

作为旁注：第二种方法（ - for循环 - ）比以前的方法更快（特别是旧浏览器）（ - each功能 - ）。

Answer 3

它们都完全一样。 .each()会返回this，因此return this.each()与this.each(); return this;完全相同

编辑：您最新的小提琴makeRed方法不会返回this，因此无法链接。