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

Question

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

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

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

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

Answer 1

使用selector($('.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的对象(如this通常是指一组由一个jQuery选择返回的元素),并返回参照this(如each函数始终返回参考-to允许链接calls-)

作为旁注:第二种方法(- forloop-)比前者(- eachfunction-)更快(特别是在旧浏览器上).

Answer 4

当您编写插件时,您正在扩展jQuery对象,并且因为jQuery对象是您返回的序列,this.each(function () { });因此您的插件将针对序列的每个项执行.