使用带有破坏性方法的 jQuery end() 函数

Posted 2023-02-22

【中文标题】使用带有破坏性方法的 jQuery end() 函数

【英文标题】：Using jQuery end() function with Destructive methods

【发布时间】：2011-08-02 17:29:57

【问题描述】：

我在理解 jQuery 中的 .end() 函数时遇到了一些问题。我读过的文档将其宣传为过滤器或其他选择的“回滚”更改。例如，

var someDivs = $('div');
someDivs
  .filter('li')
  .css('color', 'green')
.end(); // ok, reverted back to original wrapper

另一方面，这是行不通的。

someDivs
  .get(0) // get DOM element at index 0
.end(); // error, executing a jQuery method on a plain javascript object.

我只是想验证我是否正确，在调用某些破坏链的方法（如 html()、text() 和 get()）后，不可能恢复到原始包装器。

提前致谢。

【问题讨论】：

这不是不可能的。 $(someDivs.get(0)).end();。将更新我的答案并将其添加进去。

@Khez，可悲的是，这行不通。相当于再次从头选择元素，这样的话……end()去哪里了？

@Box9 ...呃你错了。 A DOM element to wrap in a jQuery object.

@Khez 我不确定您是否理解我，因为我看不出链接的相关性。我的问题是，如果传递给 $() 的唯一信息是单个 DOM 元素，end() 会返回什么？

@Box9 哦，这就是你的意思，以为你的意思是我不能将 DOM 元素传递给 $()。我证明了函数调用不会失败，而不是它会导致任何地方。

【参考方案1】：

是的，end() 仅适用于返回 jQuery 对象的方法。返回字符串（.html()、.text()）或 DOM 元素（.get()）的方法将不允许您随后链接任何 jQuery 方法。

【参考方案2】：

get() 返回一个实际的 HTML DOM 元素而不是 jQuery 元素。你需要使用eq():

someDivs.eq(0).end();

如果您需要从 dom 元素返回到 jQuery 对象上下文。您总是可以将元素放入 $() 中。比如上面的语句可以改写：

$(someDivs.get(0)).end();

^ 这正是您在大多数事件处理程序中使用$(this) 的原因。您传递的是 DOM 元素而不是 jQuery 对象。

【讨论】：

我认为 OP 知道这一点，因为他也提到了 .html() 和 .text()。

不，.end() 不会让你返回 someDivs。执行 .get(0) 会返回一个 DOM 元素，因此会丢失原始列表历史记录。

【参考方案3】：

是的，你是对的，因为那些“破坏性”函数返回的值不是 jQuery 对象。

但是，当您将选择存储在变量中时（例如 someDivs），您甚至不需要使用 .end()。 jQuery 的遍历函数（children()、filter() 等...）实际上都没有修改它们所应用的 jQuery 对象，而是返回一个新对象。 jQuery 文档的这一部分对于理解链接过程中发生的事情非常有帮助：

大部分 jQuery 的 DOM 遍历方法 对 jQuery 对象实例进行操作 并产生一个新的，匹配一个 不同的 DOM 元素集。什么时候 发生这种情况，就好像新的集合 元素被压入堆栈 这是在对象内部维护的。 每个连续的过滤方法 将一个新元素集推到 堆。如果我们需要一个较旧的元素 集合，我们可以使用end()来弹出集合 退出堆栈。

由于原来的jQuery对象没有被修改，所以不用.end()，直接引用原文即可：

var html = someDivs.filter('li').html();
var text = someDivs.filter('p').text();