jquery查找子元素

jQuery 查找子元素的方法

jQuery 提供了多种方法来查找子元素，以下是几种常用的方式：

通过 children() 方法查找直接子元素

children() 方法用于查找匹配元素的直接子元素（仅一层深度）。可以传入选择器进一步过滤结果。

$('#parent').children(); // 获取所有直接子元素
$('#parent').children('.child-class'); // 获取 class 为 child-class 的直接子元素

通过 find() 方法查找所有后代元素

find() 方法用于查找匹配元素的所有后代元素（包括多层嵌套）。这是最常用的子元素查找方式。

$('#parent').find('.target'); // 获取所有 class 为 target 的后代元素
$('#parent').find('div'); // 获取所有 div 后代元素

通过 > 子选择器直接筛选

在 jQuery 选择器中可以使用 CSS 子选择器 > 来获取直接子元素。

$('#parent > .child'); // 获取 #parent 下 class 为 child 的直接子元素

通过 has() 方法筛选包含特定子元素的父元素

has() 方法用于筛选出包含特定子元素的父元素。

$('.parent').has('.child'); // 获取包含 .child 子元素的 .parent 元素

通过 :has 伪类选择器

与 has() 方法类似，:has 伪类选择器可以直接在选择器中使用。

$('.parent:has(.child)'); // 获取包含 .child 子元素的 .parent 元素

实际应用示例

假设有以下 HTML 结构：

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="sub-container">
    <div class="item">Item 3</div>
  </div>
</div>

查找子元素的 jQuery 代码示例：

// 获取所有直接子元素
$('#container').children(); // 返回 Item 1 和 Item 2 以及 sub-container

// 获取所有 .item 子元素（包括嵌套的）
$('#container').find('.item'); // 返回 Item 1, Item 2 和 Item 3

// 使用子选择器获取直接子元素
$('#container > .item'); // 仅返回 Item 1 和 Item 2

性能注意事项

• find() 方法比 children() 搜索范围更广，但性能开销更大
• 对于简单结构，使用 children() 或子选择器 > 效率更高
• 尽可能缩小选择器范围以提高性能