jQueryPlugin:返回此vs返回this.each()

Question

是的,关于这一点有很多主题,但我仍然没有得到它:

我准备了两个jsfiddle:

归还这个

返回this.each()

有什么不同？有很多答案,但我的例子显示相同的输出.所以这些答案中的一些可能是错误的!？

---

什么"返回this.each()"在jQuery中做什么？

"它允许一个人在一堆元素上调用一个插件或一个事件,然后将相同的功能或事件应用于所有这些元素" - >工作与" return this同样!"

"它允许你链接多个功能" - >在这里相同

"允许你执行以下操作:$("mySelector").foo().show();" - >我还是可以这样,当我回到'这个'

---

我还创建了另一个jsfiddle,在我看来 - 如果你将代码包装成$("mySelector").foo().show();:

http://jsfiddle.net/7S3MW/1/

Chrome控制台显示的输出也相同!

那有什么区别？

Answer 1

两件事情:

1. 您的示例存在缺陷,因为它们对每个元素执行完全相同的操作.
2. 真正的问题不是return this对抗return this.each,问题是this对比this.each.

对于(1),考虑这个插件之间的区别:

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

演示:http://jsfiddle.net/ambiguous/eyHeu/

而这个插件:

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

演示:http://jsfiddle.net/ambiguous/5dMMH/

所以你看,你需要使用,this.each如果你需要不同地处理集合中的单个元素this.如果你的插件必须将元素特定的数据附加到每个元素,你会有类似的效果:如果你没有使用each那么你最终this会将完全相同的数据附加到内部的所有元素,这只会让你失望混淆了为什么信息在整个地方流血.

对于(2),无论你return this或return this.each(...从此x.each(...)返回都没关系x.