jQuery 遍历

选择器能从整棵 DOM 树中"一把抓"出想要的元素，而**遍历（Traversing）**则是从已选中的元素出发，向上、向下或向旁边移动，去挑选与之相关的其他元素，比如"点击 li 高亮它的父级 ul"。

先看一棵典型的 DOM 树：

<div class="root">              <!-- 祖先 -->
    <ul id="nav">               <!-- 父级 -->
        <li>首页</li>           <!-- 子级 -->
        <li>教程</li>
    </ul>
</div>

什么是遍历

遍历就是沿着 DOM 的层级关系"走来走去"：

• 向上走：找父级、祖先（parent / parents）
• 向下走：找子级、后代（children / find）
• 水平走：找兄弟（siblings / next / prev）

每一"走"都返回一个新的 jQuery 对象，可以继续链式操作。

向上遍历

从 #nav 出发向上找父级和祖先：

$("#nav").parent();   // 效果：返回 .root
$("#nav").parents();  // 效果：返回 .root、body、html 等全部祖先

parent() 只跳一级，parents() 一路到顶。选中的 li 的祖父级这样找：

$("li").parent();   // 效果：两个 li 的父级都是 #nav
$("li").parent().parent(); // 效果：再上一层得到 .root

向下遍历

从 #nav 出发找它的直接子级（children）与所有后代（find）：

$("#nav").children(); // 效果：返回两个 li（直接子级）
$("#nav").find("li"); // 效果：也返回两个 li；若 li 嵌套更深也能找到

children() 只到第一层；find() 可以穿透到任意深度的后代。

水平遍历

在同胞元素之间移动，即"兄弟之间横向找"：

$("#nav li").first().next();          // 效果：首页的下一兄弟 = 教程
$("#nav li").last().prev();           // 效果：教程的上一兄弟 = 首页
$("#nav li").first().siblings();      // 效果：首页的所有兄弟 = 教程

each() 遍历集合

有时需要逐个处理匹配到的每个元素，用 each()：

$("#nav li").each(function (index) {
    console.log(index + " => " + $(this).text());
});
// 输出：0 => 首页
// 输出：1 => 教程

回调中 this 是原生 DOM 元素，用 $(this) 包一层即可调用 jQuery 方法。

遍历的常见用途

• 菜单交互：点击某项，操作它的父级 ul 或兄弟 li。
• 表单校验：找到出错输入框所在的那一行高亮。
• 折叠面板：从标题向上定位整个面板容器。

小结

遍历 = 沿 DOM 层级"定向移动"：向上 parent/parents、向下 children/find、水平 next/prev/siblings，再用 each() 逐个处理。后面几节将分别深挖祖先、后代、同胞与过滤遍历。