假设我有以下标记:
<div class="parent">
<div class="child">
<div class="grand-child">
我想从 .grand-child
开始获取 .parent
。我可以执行以下两项之一:
$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');
总体而言,closest()
感觉是一种更好的方法,因为:
- 只有一个功能
- 与
.grand-child
和.parent
之间的其他div无关
具体来说,由于上面 #2 的优点,如果我要将标记更改为
<div class="parent">
<div class="child">
<div class="nanny">
<div class="grand-child">
然后我需要添加一个额外的 parent()
但 closest()
仍然可以正常工作。
那么您选择 parent()
或 closest()
有什么原因吗?
最佳答案
你应该使用 $('.grand-child').closest('.parent');
因为 .parent().parent()
是强基础的在你的 html 结构上,如果将来你在其中一个中添加另一个 div,那么你将使用 parent().parent()
假设你有这样的 html:
<div class="parent">
<div class="child">
<div class="grand-child-container">
<div class="grand-child">
现在如果你使用 .parent().parent()
会发生什么,它会给你错误的元素,所以推荐的方法是使用 closest()
作为它好多了。
根据文档:
parent() gets the parent of each element in the current set of matched elements, optionally filtered by a selector.
closest() For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
差异:
如果您稍微向下滚动,您可以通过官方 jquery 站点看到这两者之间的差异。
关于这两者之间的区别,还有一些更好的答案:
Difference between jQuery parent(), parents() and closest() functions
性能:
性能方面 closest()
也优于 parent()
,你可以查看 Benchmark between closest() and parent()
关于javascript - jQuery - parent() 与 closest(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24983668/