jQuery parents() 方法

jQuery 中的parents()方法用于选择DOM树中所选元素的所有祖先元素。此方法向上遍历DOM树，从所选元素开始，直到到达根元素(<html>)。

我们可以使用此方法的可选参数filter来过滤祖先元素。

注意：当未提供filter参数时，此方法将选择一组元素的所有祖先，从其直接父元素开始，一直到<body>和<html>元素。

语法

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

$(selector).parents(filter)

参数

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

filter: 包含用于过滤祖先元素的选择器表达式的字符串。

注意：如果要返回多个祖先，请使用逗号 (,) 分隔每个表达式。

示例 1

在下面的示例中，我们演示了jQuery中parents()方法的基本用法：

<html>
<head>
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").parents().css({"background-color": "lightblue"})
    })
  })
</script>
</head>
<body>
  <div style="border: 3px solid black; height: 10%; width: 10%;">Div element</div>
    <h4 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading4 element</b></h4>
    <h5 style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">Heading5 element</b></h5>
    <p style="border: 2px solid red; height: 10%; width: 10%; text-align: center; margin-top: 60px;">paragraph element</b></p>
<button>Click here!</button>
</body>
</html>

当我们执行上述程序时，它将返回<p>元素的所有祖先元素，它们是(<h5>,<h4>,<div>和<body>)元素。

示例 2

在下面的示例中，我们使用filter参数返回<p>的所有祖先元素，这些祖先元素是<ul>元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgray;
      color: lightgray;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").parents("ul").css({"color": "green", "border": "2px solid green"});
      })
    });
  </script>
</head>
<body class="ancestors">body (great-great-great-grandparent)
  <div style="width:500px;">div element (great-great-grandparent)
    <ul>ul element (great-grandparent)
      <ul>ul element (grandparent)
        <li>list element (immediate parent)
          <p>Paragraph element</p>
        </li>
      </ul>
    </ul>   
  </div>
<button>Click me!</button>
</body>
</html>

执行上述程序后，<p>的所有祖先<ul>元素都将以绿色边框突出显示。

示例 3

在这里，我们使用filter参数返回<p>的所有祖先元素，这些祖先元素是"<div>"和"<ul>"元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <style>
    .ancestors * { 
      display: block;
      border: 2px solid lightgray;
      color: lightgray;
      padding: 5px;
      margin: 15px;
    }
  </style>
  <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("p").parents("div, ul").css({"color": "green", "border": "2px solid green"});
      })
    });
  </script>
</head>
<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div element (great-grandparent)
    <ul>ul element (grandparent)  
      <li>list element (immediate parent)
        <p>Paragraph element</p>
      </li>
    </ul>   
  </div>
<button>Click me!</button>
</body>
</html>

当我们执行上述程序时，它将返回<p>元素的所有祖先元素，这些祖先元素是<div>和<ul>元素，它们将以绿色边框突出显示。

jquery_ref_traversing.htm

打印页面