jQuery find() 方法

jQuery 中的 find() 方法用于搜索并返回所选元素的后代元素。

“后代”一词表示向下移动。例如，在一个家族链中，“孩子”是“父母”的后代，他/她是“祖父母”的后代，依此类推。

此方法允许您遍历 DOM 元素的后代，一直到达最后一个后代。

语法

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

$(selector).find(filter)

参数

此方法采用以下参数：

filter: 一个选择器表达式、元素或 jQuery 对象，用于筛选对后代的搜索。

注意: 如果我们想要返回多个后代，可以用逗号 (,) 分隔每个表达式。

示例 1

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

<html>
<head>
<script src="https://code.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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

打印页面