Jquery查找父级 - Javascript

当我们需要在DOM中向上遍历以查找父元素时，jQuery提供了多种方法。

parent()

parent() 方法返回被选元素的直接父元素。如果您需要跨越多个级别的父元素，请使用 parents() 或 closest() 方法。

$(selector).parent()

parents()

parents() 方法返回被选元素的所有祖先元素，它一直回溯到document对象。该方法接受一个可选的过滤器参数，用于更精细地筛选出父级元素。

$(selector).parents(filter)

closest()

closest() 方法用于获取匹配选择器的第一个祖先元素。该方法向上遍历，直到找到匹配选择器的元素为止。该方法接受一个可选的过滤器参数，用于更精细地筛选出父级元素。

$(selector).closest(filter)

下面是一个例子，使用 parent() 方法来查找元素的直接父级：

<div class="parent">
  <div class="child"></div>
</div>

$('.child').parent(); // 返回 class="parent" 元素

下面是一个例子，使用 parents() 方法来查找元素的所有祖先元素：

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

$('.child').parents(); // 返回 class="parent" 和 class="grandparent" 元素

下面是一个例子，使用 closest() 方法来查找元素的匹配选择器的最近祖先元素：

<div class="grandparent">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>

$('.child').closest('.parent'); // 返回 class="parent" 元素

为了更好的性能，我们可以在 parents() 方法中带上筛选器参数来精细地筛选出父级元素，例如：

$('.child').parents('.grandparent'); // 返回 class="grandparent" 元素

以上就是用jQuery查找父级的几种方法。