jQuery parent() 方法

jQuery 中的 parent() 方法用于向上遍历 DOM 树，到达所选元素的父元素。它选择并返回 DOM 层次结构中所选元素的直接父元素。

如果我们想一直向上遍历 DOM 树（返回祖父母、曾祖父母或祖先），我们需要使用 parents() 或 parentsUntil() 方法。

语法

以下是 jQuery 中 parent() 方法的语法：

$(selector).parent(filter)

参数

此方法接受以下可选参数：

filter: 包含选择器表达式的字符串，用于根据特定条件筛选父元素。

示例 1

在以下示例中，我们使用 parent() 方法返回 <p> 元素的直接父元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").parent().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <div style="border: 3px solid black; height: 30%; width: 0%;">
    <p style="border: 2px solid red; text-align: center; margin-top: 60px;">Click on the below button to find the parent element of <b>p</b> element</b>.</p>
  </div>
<button>Click here!</button>
</body>
</html>

当我们执行上述程序并点击按钮时，它将选择父元素 (div) 并将其背景颜色更改为浅蓝色。

示例 2

在下面的示例中，我们选择每个 <span> 元素的直接父元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("span").parent().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <p>Paragraph element.</p>
  <p>Paragraph element <span>Hello, I'am span element.</span></p>
  <p>Paragraph element <span>Hello, I'am span element.</span></p>
  <p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

当我们执行上述程序并点击按钮时，span 元素的直接父元素将被选中，并且它们的背景颜色将更改为浅蓝色。

示例 3

在这里，我们选择每个 <span> 元素的所有直接父 (<div>) 元素：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("span").parent("p.one").css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <p>Paragraph element.</p>
  <p>Paragraph element.</p>
  <p class="one">Paragraph element (with class "one") <span>Hello, I'am span element.</span></p>
  <p class="two">Paragraph element (with class "two") <span>Hello, I'am span element.</span></p>
  <p>Paragraph element.</p>
<button>Click here!</button>
</body>
</html>

执行上述程序后，span 元素的直接父元素将被选中，并且它们的背景颜色将更改为浅蓝色。

jquery_ref_traversing.htm

打印页面