Javascript jQueryPlugin:返回这个vs返回这个.each（）

是的，有很多关于这个的话题，但我还是不明白

我准备了两个JSFIDLE：

有什么区别？ 有很多答案，但我的示例显示了相同的结果。所以其中一些答案可能是错误的

---

“它允许一个人在一堆元素上调用插件或事件，然后将相同的函数或事件应用于所有元素”-->work's with

也返回此

“它允许您链接多个函数”-->此处相同

“允许您执行以下操作：

$（“mySelector”）.foo（）.show（）；

”-->当我使用

返回此值时，我仍然可以执行此操作。”


我还创建了另一个JSFIDLE，它表明——在我看来——将代码包装到
中并返回this.each（）并不重要：


Chrome控制台显示相同的输出

那么有什么不同呢？
它们都完全一样
.each（）
返回
此
，因此
返回此。each（）
与
此.each（）完全相同
返回此

编辑：你最新的小提琴的
makeRed
方法不会返回
this
，因此无法链接。
两件事：

您的示例有缺陷，因为它们对每个元素的作用完全相同
真正的问题不是
返回这个
与
返回这个。每个
，问题是
这个
与
这个。每个
对于<强>（1）< /强>，考虑此插件之间的差异：
(function($) {
    $.fn.mangle = function(options) {
        this.append(' - ' + this.data('x'));
        return this;
    };
})(jQuery);

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

演示：

这个插件：

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

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

演示：

因此，如果需要对
this
集中的各个元素进行不同的处理，则需要使用
this.each
。如果你的插件必须将特定于元素的数据附加到每个元素上，你会有类似的效果：如果你没有使用
每个
，那么你最终会将完全相同的数据附加到
这个
中的所有元素上，这只会让你对信息为什么到处泛滥感到困惑

对于（2），无论您是
返回此
还是
返回此，都没有关系。每个（…
）都会返回
x
。
让我向您展示两段可以澄清您的问题的“等效”代码：

使用jQuery“each”函数：

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(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);

不带jQuery“each”函数：

(function($) {
    $.fn.mangle = function(options) {
        return this.each(function() {
            $(this).append(' - ' + $(this).data('x'));
        });
    };
})(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);

（函数（$）{
$.fn.mangle=函数（选项）{
var objs=这个；
对于（var i=0；iyop，改变了它，第三把小提琴只是为了检查它是否相等，所以互联网上大约有上千个教程，讲了一些错误的东西？？有点。返回值是一样的，但总体行为可能完全不同，这取决于插件的功能。案例很简单，如果你想要一个特定于节点的过滤器……try logging
$（this）.text（）
在没有
的一个中，每个
谢谢，这正是我想要的：）