jQuery find() 方法

jQuery 中的 find() 方法用於搜尋並返回所選元素的後代元素。

“後代”一詞表示向下移動。例如，在一個家族鏈中，“孩子”是“父母”的後代，他/她是“祖父母”的後代，依此類推。

此方法允許您遍歷 DOM 元素的後代，一直到達最後一個後代。

語法

以下是 jQuery 中 find() 方法的語法：

$(selector).find(filter)

引數

此方法採用以下引數：

filter: 一個選擇器表示式、元素或 jQuery 物件，用於篩選對後代的搜尋。

注意: 如果我們想要返回多個後代，可以用逗號 (,) 分隔每個表示式。

示例 1

在以下示例中，我們使用 find() 方法返回 <div> 元素的所有 <span> 後代元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('div').find('span').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

當我們執行上述程式時，<div> 元素的後代 <span> 元素將具有紅色和紅色邊框。

示例 2

我們可以使用 "*" 選擇器返回元素的所有後代元素

在此示例中，我們使用 "*" 選擇器返回 <ul> 的所有後代元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('ul').find('*').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

當我們執行上述程式時，<div> 的所有後代元素（<li> 和 <span>）都將被返回。

示例 3

我們可以用逗號 (,) 分隔每個表示式以返回多個後代。

在此示例中，我們返回 <div> 元素的多個後代：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .descendants * { 
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $('div').find('ul, li, span').css({"color": "red", "border": "1px solid red"});
});
</script>
</head>
<body class="descendants">
<div id="container">Great-Grandparent
  <ul>Grandparent
    <li>Parent
      <span>Child</span>
    </li>
  </ul>
</div>
</body>
</html>

當我們執行上述程式時，將返回 <div> 的多個後代元素（<ul>、<li> 和 <span>）。

jquery_ref_traversing.htm

列印頁面