Question

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

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


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

Answer 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

Answer 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");

jQuery .end方法不使用jQuery对象

2 个答案: