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.jquery.com/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.jquery.com/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.jquery.com/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

列印頁面