当前位置：首页 > news >正文

jQuery 遍历 - 后代

news 2026/4/21 3:19:59

jQuery 遍历 - 后代元素 (Descendants)

在 jQuery 中，后代遍历用于从当前选中的元素向下查找其子元素、孙元素等所有后代节点。这是 DOM 操作中最常用的功能之一。

一、核心方法

1.`children()`- 获取直接子元素

只返回一级子元素（直接后代），不包含孙元素及更深层级的节点。

// 语法$(selector).children();$(selector).children("selector");// 可选：过滤特定子元素// 示例$("ul").children();// 返回 ul 下所有的直接子元素 (通常是 li)$("ul").children("li");// 返回 ul 下所有的直接 li 子元素$("div").children(".item");// 返回 div 下 class 为 item 的直接子元素

特点：

只遍历一层深度。
忽略文本节点和注释节点，只返回元素节点。
如果子元素嵌套了其他标签，不会递归获取更深层级。

2.`find()`- 获取所有后代元素

返回选中元素下的所有后代元素（包括子、孙、曾孙等所有层级）。

// 语法$(selector).find("selector");// 示例$("ul").find("li");// 返回 ul 下所有的 li (包括嵌套在 li 里的 li)$("div").find(".active");// 返回 div 下所有 class 为 active 的后代$("form").find("input");// 返回 form 下所有的 input 标签

特点：

递归遍历所有层级。
必须传入选择器（不能像children()那样不带参数获取所有子元素，虽然带*选择器可以达到类似效果）。
性能通常比children()稍慢，因为需要遍历更深的 DOM 树。

二、方法对比

方法	遍历深度	是否需选择器	性能	典型场景
`children()`	仅直接子级	可选	快	获取列表项、直接容器
`find()`	所有后代	必须	中	搜索表单控件、深层嵌套元素

示例对比：

<divid="parent"><divclass="child"><divclass="grandchild">孙元素</div></div></div><script>$("#parent").children(".child");// 返回：.child (1个)$("#parent").find(".child");// 返回：.child (1个)$("#parent").children(".grandchild");// 返回：空 (0个)$("#parent").find(".grandchild");// 返回：.grandchild (1个)</script>

三、代码示例

场景 1：获取列表项并处理

<ulid="menu"><li>首页<ul><li>新闻</li><li>体育</li></ul></li><li>关于</li></ul><script>// 只获取一级菜单项 (直接子 li)$("#menu").children("li").css("font-weight","bold");// 获取所有菜单项 (包括嵌套的)$("#menu").find("li").css("color","blue");</script>

场景 2：表单数据收集

// 获取表单内所有的输入控件 (无论嵌套多深)varinputs=$("#myForm").find("input, select, textarea");inputs.each(function(){console.log($(this).attr("name"));});

场景 3：动态内容查找

// 在动态生成的内容块中查找特定元素$(".content-block").find(".error-message").show();

四、常用技巧

1. 组合使用`children`和`find`

// 获取 ul 的直接子 li，然后在这些 li 内部查找所有的 span$("ul").children("li").find("span").addClass("highlight");

2. 使用通配符选择器模拟“所有子元素”

// 获取 div 下所有直接子元素 (类似 children() 不带参数)$("div").children("*");

3. 链式调用与`end()`

$("div").find("p")// 切换到所有 p 后代.css("color","red").end()// 回到原来的 div.children("h2")// 切换到 div 的直接 h2 子元素.css("color","blue");

4. 性能优化

如果确定只需要直接子元素，优先使用children()，性能更好。

如果选择器很复杂，尽量在find()中直接写完整选择器，而不是链式调用多次。

// 推荐 (一次查找)$("div").find("ul > li.active span");// 不推荐 (多次查找，性能较差)$("div").find("ul").children("li").filter(".active").find("span");

五、注意事项

文本节点：children()和find()都只返回元素节点，不会返回文本节点或注释节点。如果需要处理文本，需使用.contents()。
选择器必须：find()必须传入选择器字符串，不能像children()那样省略。
上下文：find()是在当前选中元素的内部查找，不会跨越到其他分支。
空结果：如果找不到匹配的元素，返回空的 jQuery 对象，不会报错。
性能：对于深层嵌套的 DOM，find()可能会遍历大量节点，注意选择器的精确度。