jQuery | find() 与示例

概述

find() 是 jQuery 中的一个方法，用于在当前元素集合中查找符合指定条件的后代元素。它可以帮助我们快速地定位目标元素，避免使用复杂的 DOM 操作。

语法

$(selector).find(filter)

• selector: 必需，用于定位目标元素的选择器。
• filter: 可选，用于过滤定位到的元素。

示例

给定以下 HTML 代码：

<div id="container">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
  <div class="wrapper">
    <h2>title</h2>
    <p>content</p>
  </div>
</div>

示例一：查找后代元素

// 查找 <ul> 元素中的 <li> 元素
$('#container').find('ul').find('li');

上面的代码先定位到 #container 元素，然后在它的后代元素中查找 ul 元素，再在 ul 元素的后代元素中查找 li 元素。

示例二：过滤查找到的元素

// 查找 class 为 wrapper 的 div 元素的子元素中的 h2 元素
$('#container').find('.wrapper').find('h2');

// 查找 id 为 container 的 div 元素的子元素中的 h2 元素
$('#container').find('#container').find('h2');

上面的代码中，.wrapper 和 #container 都是已经定位到的元素，我们可以在它们的子元素中查找符合条件的元素。

总结

使用 find() 方法可以快速地定位到目标元素，并可以结合过滤条件进行更精细的查找。它对于 DOM 操作而言是一种很方便且易读的方式。