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():获取介于当前元素和目标选择器之间的祖先元素。







