如何在jQuery中查找某一子元素下的嵌套子元素？附DOM结构示例

嗨，针对你给出的DOM结构，我来给你梳理几种用jQuery查找指定子元素下嵌套子元素的常用方法，每种都对应不同的场景，你可以按需选用：

首先先明确你的DOM结构方便对照：

<div class="main"> 
  <div class="list-elements"> 
    <div class="element-item">Element 1</div> 
    <div class="element-item active">Element 2</div> 
    <div class="element-item">Element 3</div> 
    <div class="element-item active">Element 4</div> 
  </div> 
  <div class="another-elements"> 
    <div class="element-item active">Element 1</div> 
    <div class="element-item">Element 2</div>
    <!-- 更多元素 -->
  </div>
</div>

1. 定位特定父容器下的所有嵌套子元素 #

比如你要精准获取.list-elements容器里的所有.element-item，有几种常用写法：

• 直接复合选择器：适合一次性直接定位，写法简洁

// 直接通过层级选择器定位到目标元素
const listItems = $('.main .list-elements .element-item');

• 结合find()方法：如果你的父容器已经是一个jQuery对象（比如之前已经获取过.list-elements），这种方式更灵活，能查找父容器下所有层级的后代元素

// 先获取父容器
const listContainer = $('.list-elements');
// 再查找父容器下所有的.element-item
const listItems = listContainer.find('.element-item');

• 使用children()方法：仅查找父容器的直接子元素，适合你确定.element-item是.list-elements直接子节点的场景

// 只获取.list-elements的直接子元素.element-item
const directListItems = $('.list-elements').children('.element-item');

2. 筛选带active类的目标子元素 #

如果需要找出特定父容器下带active类的.element-item，只需要在选择器里叠加类筛选即可：

• 复合选择器直接筛选：

// 获取.list-elements下所有带active类的.element-item
const activeListItems = $('.main .list-elements .element-item.active');

• 结合filter()方法：适合已经获取了所有子元素后，再进行二次筛选的场景

// 先拿到.list-elements下所有.element-item，再筛选出带active的
const activeListItems = $('.list-elements .element-item').filter('.active');

3. 区分不同父容器的子元素 #

如果要分别处理.list-elements和.another-elements下的元素，只需要分别指定父容器即可：

// 获取.list-elements下的active项
const listActiveItems = $('.list-elements .element-item.active');
// 获取.another-elements下的active项
const anotherActiveItems = $('.another-elements .element-item.active');

小提示 #

• find()会遍历父容器下所有层级的后代元素，不管嵌套多深；children()只找直接子元素，根据你的DOM结构复杂度选择即可。
• 如果已经提前获取了.main的jQuery对象，也可以基于它来链式查找，代码更清晰：

const mainContainer = $('.main');
// 在.main范围内查找.list-elements里的active项
const activeItemsInList = mainContainer.find('.list-elements .element-item.active');

内容的提问来源于stack exchange，提问作者Gabri