当前位置：首页 > jquery

jquery父

2026-03-17 14:15:50jquery

jQuery 获取父元素的方法

在jQuery中，有几种方法可以获取当前元素的父元素或祖先元素。以下是常用的方法及其说明：

parent() parent()方法返回被选元素的直接父元素（仅上一级）。例如：

$("span").parent();

这会选择所有<span>元素的直接父元素。

parents() parents()方法返回被选元素的所有祖先元素（包括父、祖父、曾祖父等）。例如：

jquery父

$("span").parents();

这会选择所有<span>元素的所有祖先元素。

parentsUntil() parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。例如：

$("span").parentsUntil("div");

这会选择所有<span>元素的祖先元素，直到遇到<div>元素为止。

jquery父

closest() closest()方法返回被选元素的第一个祖先元素（包括自身），该元素匹配给定的选择器。例如：

$("span").closest("div");

这会选择离<span>元素最近的<div>祖先元素。

示例代码

以下是一个完整的示例，展示如何使用这些方法：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("span").parent().css({"color": "red", "border": "2px solid red"});
  });
  $("#btn2").click(function(){
    $("span").parents().css({"color": "blue", "border": "2px solid blue"});
  });
  $("#btn3").click(function(){
    $("span").parentsUntil("div").css({"color": "green", "border": "2px solid green"});
  });
  $("#btn4").click(function(){
    $("span").closest("div").css({"color": "orange", "border": "2px solid orange"});
  });
});
</script>
</head>
<body>

<div class="ancestor">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</div>

<button id="btn1">parent()</button>
<button id="btn2">parents()</button>
<button id="btn3">parentsUntil()</button>
<button id="btn4">closest()</button>

</body>
</html>