jquery - 哪个更有效 : .parent().parent().parent() ~或~parents (".foo") ~或~最接近 (".foo")

Question

我有一个 A 标签，可以触发它的曾曾曾祖 parent 的动画。以下所有方法都可以，但哪一个最有效，为什么？

$(this).parent().parent().parent().parent().parent().animate(...);

$(this).parents(".foo").animate(...);

$(this).closest(".foo").animate(...);

我怀疑第一个可能是，因为它是最明确的，但出于维护原因(嵌套可能会改变)我更喜欢第二个。它们在实践中似乎都运行顺利。

Answer 1

分析如下:

• parent()仅在 DOM 树中向上移动一级。
• parents(".foo")走到根目录并仅选择那些与给定选择器 .foo 匹配的元素。
• closest(".foo")走到根目录，但一旦元素与选择器 .foo 匹配就停止。

所以我会选择最后一个，closest(".foo")。原因:

• 这比链接 parent 更好，因为如果您的文档因删除或添加一个层次结构而发生更改，则无需更改 jQuery 代码。
• 它比 parents(".foo") 更好，因为一旦找到匹配项它就会停止。