为什么在jQuery插件中需要返回this.each(function())？

Question

我看过一些开发jQuery插件的教程和示例，它们往往会返回：

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

在实例化插件的函数结尾处，我发现大家都遵循这个标准但并没有解释其原因。有人能告诉我这种做法背后的原理吗？

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

- Corey Sunwold

---

这很奇怪。似乎只返回this会是一个更好的选择。 - Walt W

@Walt W - 我同意。我理解为什么我们会返回这个，因为这符合流畅接口的思想。但我不理解的部分是每个调用。 - Corey Sunwold

请澄清一下，您写的函数是空白的吗？还是里面有代码？ - Walt W

@Walt w - 不，这些函数不是空的，我应该澄清一下。我会更新我的代码示例。 - Corey Sunwold

Answer 1

当您使用选择器（$('.myclass')）筛选元素时，它可能匹配不止一个元素。
使用 each，您可以迭代所有匹配的元素并将代码应用于它们。

- Felix Kling

---

当然！谢谢，我想我以前使用插件时都把这个视为理所当然了。 - Corey Sunwold

虽然这是绝对正确的，但实际上返回它的原因是为了允许链式操作... - Leo

@Mef：我觉得这很清楚，而且更多的是关于为什么使用“each”。 - Felix Kling

如果您有一段代码想要在.each()循环之后只运行一次，您可以在循环后加上' return this '并添加运行最后的代码吗？ - jacobq

Answer 2

jQuery支持"链式方法"，这意味着大多数 jQuery 函数应该返回this。.each() 返回this，如果你想让$('selector').yourPlugin().css(...)工作，你应该return this。

- gnarf

---

这是正确的答案。你返回的原因是为了让链式调用成为可能。 - Undefined

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 对象中的所有元素（由于 this 通常指向由 jQuery 选择器返回的一组元素），并返回对 this 的引用（因为 each 函数始终返回该引用，以允许链接调用）。

顺便提一下：第二种方法（-for循环-）比前者（-each函数-）更快（特别是在旧版浏览器上）。

- rubensa

Answer 4

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

- Max Toro

---

但实际上你只是返回了 "one" 和 "this"，每个部分都是独立的，不是吗？ - Björn

@Marcel：事实上，你可以分别调用 each 和 return this 作为两个不同的语句。这样做是有效的，因为 each 方法也会返回 this。 - Max Toro

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/

- adardesign