jQuery .end 方法不适用于 jQuery 对象答案

【问题标题】：jQuery .end method not working with jQuery objectjQuery .end 方法不适用于 jQuery 对象
【发布时间】：2013-01-03 14:29:58
【问题描述】：

我有一个非常简单的自定义插件。如果它在调用它后返回this，则.end() 效果很好。但是，如果它返回 $(this)，.end() 将不起作用。为什么会这样？我在这里遗漏了什么吗？

Code:

$.fn.fnBar = function() {
    $(this).html("hello!");
    //return $(this); // Doesn't work
    return this; // Works!
};


$("div")
    .find("span")
        .fnBar()
    .end()
    .css("color", "red");

【问题讨论】：

标签： jquery jquery-plugins jquery-end

【解决方案1】：

来自文档：

结束当前链中最近的过滤操作并将匹配的元素集返回到之前的状态。

在

$("div").find("span").fnBar().end()

end 将过滤状态设置为调用find 之前的状态。

仅使用$(this)，您正在重建一个新的 jQuery 对象，没有任何历史记录。你没有过滤操作，也没有链，所以没有什么可以取消的。

jQuery end 函数是这样实现的：

end: function() {
    return this.prevObject || this.constructor(null);
},

这意味着您可以通过记录 jQuery 对象的 prevObject 属性来查看差异：

console.log(this.prevObject);
console.log($(this).prevObject); // will give undefined

【讨论】：

【解决方案2】：

在 jQuery 方法中，this 已经是 jQuery 对象。 $(this) 创建一个完全新 jQuery 对象，没有过滤历史记录。

同样的问题，但可能更容易理解：

var bar = $("div").find("span");
// This doesn't work
$(bar).end().css("color", "red");
// This does
bar.end().css("color", "red");

【讨论】：