为什么要在jQuery插件中返回this.each（function（））？

72

我在开发jQuery插件时看到的一些教程和示例倾向于返回

this.each(function () {
    //Plugin code here
});

在实例化插件的函数末尾，但是我还没有看到其背后的任何原因，这似乎是每个人都遵循的标准。有人能启发我这种做法背后的原因吗？

编辑：为澄清起见，我的问题不是关于为什么要返回这个，而是为什么插件应该返回this.each。

jquery jquery-plugins

— 科里·桑沃尔德
source

真奇怪好像刚刚返回this将是一个更好的想法..

— 沃尔特·w ^

@Walt W-我同意。我理解为什么我们会返回此值，因为这与流畅接口的想法保持一致。但是我不明白的部分是每个电话。

— Corey Sunwold

只是为了澄清一下，在编写函数时这些函数是否为空白？还是那里有代码？

— Walt W 2010年

@Walt w-没有功能不为空，我应该澄清一下。我将更新我的代码示例。

— Corey Sunwold

78

使用选择器（$('.myclass')）过滤元素时，它只能匹配多个元素。
使用each，您可以遍历所有匹配的元素，并将代码应用于所有这些元素。

— 费利克斯·克林
source

1

当然！谢谢，我想我以前每次使用插件时都认为这是理所当然的。

— Corey Sunwold

15

尽管这是绝对正确的，但实际的原因return是允许链接...

— Leo 2010年

3

@Mef：好吧，我认为这很清楚，这更多地是为什么使用each。

— Felix Kling

如果您有代码想要在该.each（）循环之后运行一次，是否可以在循环和最后运行代码之后“返回”该代码？

— jacobq 2012年

24

jQuery支持“可链接方法”，这意味着大多数jQuery函数都应返回this。 .each()返回this，如果您想$('selector').yourPlugin().css(...)工作，则应该return this。

— 纳尔夫
source

6

这是正确的答案。您返回的原因是允许链接。

— 2013年

10

让我向您展示两个“等效”代码段，它们可以阐明您的问题：

用jQuery的“每个”功能：

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

没有jQuery“每个”功能：

(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函数始终返回参考-to允许链接calls-）

作为一个方面说明：第二种方法（-for环-比前一个更快（特别是在旧版浏览器）（）-each功能- ）。

— 鲁本萨
source

7

当您编写插件时，您将扩展jQuery对象，并且由于jQuery对象是一个序列，this.each(function () { });因此您将返回该序列，以便对序列中的每一项执行插件。

— 马克斯·托罗
source

1

但您实际上只是返回“一个”“此”，对吗？每个部分都是分开的，不是吗？

— 汉斯

3

@Marcel：是的，实际上您可以调用each然后返回this，作为两个单独的语句。之所以有效，是因为它each也会返回this。

— Max Toro 2012年

4

简而言之，它允许您利用链接的优势，因为它返回到现在为止已完成的所有操作，因此下一个.anyMethod()可以对已更改/已修改的元素进行操作。

此外，请查看这些链接，它们将为您提供有关jQuery插件开发的大量信息。

http://www.webresourcesdepot.com/jquery-plugin-development-10-tutorials-to-get-started/
http://www.learningjquery.com/2007/10/a-plugin-development-pattern
http：// /snook.ca/archives/javascript/jquery_plugin

这里有一个不错的基于Web的应用程序，可帮助您快速启动jQuery插件。 http://starter.pixelgraphics.us/

— 阿达尔设计
source