Question

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

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

在实例化插件的函数结束时但我还没有看到它背后的任何推理，它似乎是每个人都遵循的标准。任何人都可以告诉我这种做法背后的原因吗？

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

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

Answer 5

简而言之，它允许您利用链接，因为它返回到目前为止所做的所有操作，因此下一个.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/

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

5 个答案: