为什么在jquery插件中返回this.each(function())?

使用选择器筛选元素时( $('.myclass') ,它可以匹配多个元素。
用 each ,你迭代 所有匹配元素 你的代码也适用于所有这些。

jquery支持“可链接方法”,这意味着 最 jquery函数应该返回 this . .each() 收益率 这 ,如果你愿意 $('selector').yourPlugin().css(...) 为了工作,你应该 return this .

让我向您展示两个“等效”代码,它们可以澄清您的问题:

使用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 对象(对象) 作为 这 通常是指jquery选择器返回的一组元素 )并将引用返回到 这 ( 作为 每个 函数总是返回该引用-以允许链接调用- )

作为旁注 :第二种方法( - for 回路- )比以前的浏览器更快(特别是在旧浏览器上)( - 每个 功能- )

当您编写插件时,您正在扩展jquery对象,并且由于jquery对象是一个序列,所以您返回 this.each(function () { }); 这样你的插件就可以为序列中的每一项执行了。

简言之,它允许你利用链接,因为它返回到现在为止所做的一切,所以下一个 .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/