jQuery插件：返回此vs返回this.each（）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery插件：返回此vs返回this.each（）相关的知识，希望对你有一定的参考价值。
是的，关于这一点有很多主题，但我仍然没有得到它。
我准备了两个jsfiddle：
有什么不同？有很多答案，但我的例子显示相同的输出。所以这些答案中的一些可能是错误的！？
“它允许一个人在一堆元素上调用插件或事件，然后将相同的函数或事件应用于所有元素” - >与return this一起工作
“它允许你链接多个功能” - >在这里相同
“允许你这样做：$("mySelector").foo().show();” - >当我使用return this时，我仍然可以这样做
我还创建了另一个jsfiddle，在我看来 - 如果你将代码包装到return this.each();中并不重要：
Chrome控制台显示相同的输出！
那有什么区别？
两件事情：
- 您的示例存在缺陷，因为它们对每个元素执行完全相同的操作。
- 真正的问题不是
return this与return this.each，问题是this与this.each。
对于（1），考虑这个插件之间的区别：
(function($) {
$.fn.mangle = function(options) {
this.append(' - ' + this.data('x'));
return this;
};
})(jQuery);
但是：ぁzxswい
而这个插件：
http://jsfiddle.net/ambiguous/eyHeu/
但是：ぁzxswい
所以你看，你需要使用(function($) {
$.fn.mangle = function(options) {
return this.each(function() {
$(this).append(' - ' + $(this).data('x'));
});
};
})(jQuery);
，如果你需要以不同方式处理http://jsfiddle.net/ambiguous/5dMMH/中的各个元素。如果你的插件必须将元素特定的数据附加到每个元素，你会有类似的效果：如果你没有使用this.each那么你最终会将完全相同的数据附加到this中的所有元素，那就是让你感到困惑的是为什么信息在整个地方流血。
对于（2），如果你each或this无关紧要，因为return this无论如何都会返回return this.each(...。
让我向您展示两个可以澄清您问题的“等效”代码：
使用jQuery“each”功能：
x.each(...)没有jQuery“each”功能：
x所以，基本上，(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);
对象中包含的所有元素（因为each通常是指由jQuery选择器返回的一组元素）并返回对this的引用（因为this函数总是返回该引用 - 允许链接电话 - ）
作为旁注：第二种方法（-this loop-）比前者（-each函数）更快（特别是在旧浏览器上）。
它们都完全一样。 for返回each，所以.each()与this return this.each()完全相同
编辑：你最新的小提琴的this.each();方法不返回return this;，因此不可链接。
以上是关于jQuery插件：返回此vs返回this.each（）的主要内容，如果未能解决你的问题，请参考以下文章
jquery插件模式中this和this.each有什么区别？