jQuery 后代

"后代"与"祖先"相反，指当前元素内部的所有层级：子级、孙级、曾孙级……jQuery 用 children() 与 find() 两个方法向下遍历。

演示用的嵌套结构：

<div id="outer">
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
    </ul>
    <p>一段说明</p>
</div>

children()：只取直接子级

children() 只返回直接子元素（第一层），孙级及更深的不算：

console.log($("#outer").children().length); // 输出：2（ul 和 p）

效果：两个直接孩子是 ul 与 p；ul 里的 li 属于孙级，不在结果中。

children() 带选择器过滤

children(选择器) 可以在直接子级中挑出符合条件的那部分：

console.log($("#outer").children("p").length); // 输出：1（只有那个 p）
console.log($("#outer").children("li").length); // 输出：0（li 不是直接子级）

find()：取所有后代

find() 深入所有层级，返回全部后代中匹配选择器的元素：

console.log($("#outer").find("li").length); // 输出：2（孙级 li 也能找到）

find() 必须传选择器才最有意义；传 "*" 会返回所有后代元素：

console.log($("#outer").find("*").length); // 输出：4（ul、2 个 li 和 p；文本节点不算元素）

children() 与 find() 对比

方法	搜索深度	匹配范围	典型用途
children()	仅第一层	直接子元素	遍历列表项、面板子块
find()	全部层级	所有后代	深入查找任意层节点

选型口诀：只要"儿子"用 children()，要"子孙万代"用 find()。

综合示例：菜单只折叠第一层

<div class="panel">
    <ul>
        <li>一级菜单
            <ul>
                <li>子菜单 A</li>
                <li>子菜单 B</li>
            </ul>
        </li>
    </ul>
</div>

$(".panel").children("ul").slideUp();  // 效果：只收起第一层 ul
$(".panel").find("ul").slideUp();      // 效果：所有层级的 ul 全部收起

一个收一层，一个收全部，直观看出二者差异。

小结

向下遍历两个方法：children() 只看第一层直接子级、find() 挖遍所有后代，都支持选择器过滤。搞清"只到儿子"还是"直到孙子"，写遍历就不会出错。