jquery 上一级

jQuery 获取上一级元素的方法

在 jQuery 中，可以通过 parent() 方法或 closest() 方法获取当前元素的上一级（父级）元素。

parent() 方法
parent() 方法用于直接获取当前元素的直接父级元素。
语法：

$(selector).parent();

示例：

<div class="parent">
  <p class="child">点击我获取父级</p>
</div>

$(".child").click(function() {
  $(this).parent().css("background-color", "yellow");
});

点击 <p> 元素后，其父级 <div> 的背景色会变为黄色。

closest() 方法
closest() 方法用于向上查找匹配选择器的最近祖先元素（包括自身）。
语法：

$(selector).closest(targetSelector);

示例：

<div class="grandparent">
  <div class="parent">
    <p class="child">点击我查找最近的 div</p>
  </div>
</div>

$(".child").click(function() {
  $(this).closest("div").css("border", "2px solid red");
});

点击 <p> 元素后，最近的 <div>（即 .parent）会添加红色边框。

区别与应用场景

• parent()：仅获取直接父级元素，适用于明确的父子层级关系。
• closest()：向上查找匹配的祖先元素（包括父级、祖父级等），适用于不确定层级的场景。

其他相关方法

• parents()：获取所有祖先元素（直至文档根元素），可通过选择器过滤。
• parentsUntil()：获取介于当前元素和目标选择器之间的祖先元素。