jQuery 遍历（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代前端开发中，DOM 操作是 JavaScript 的核心技能之一。而 jQuery 遍历作为简化 DOM 操作的利器，能够帮助开发者高效地访问和修改页面元素。无论是初学者还是中级开发者，掌握这一技术都能显著提升代码的可读性和开发效率。本文将从基础概念出发，逐步深入讲解 jQuery 遍历的核心方法，并通过实际案例演示其应用场景，帮助读者构建扎实的实践能力。

一、什么是 jQuery 遍历？

jQuery 遍历（jQuery Traversal）是指通过 jQuery 方法在 DOM 树中导航和筛选元素的过程。想象 DOM 树像一个文件夹结构：每个 HTML 元素是文件夹或文件，而遍历就是“浏览”这些文件夹，找到目标元素。例如，从父元素找到子元素，或从当前元素跳转到兄弟元素。

核心思想：链式调用与上下文

jQuery 的遍历方法通常以链式调用的形式出现，例如：

$("#parent").find(".child").css("color", "red");  

这段代码首先选择 #parent 元素，然后在其内部查找所有 .child 类的后代元素，最后将这些元素的文本颜色设为红色。这种链式操作不仅简洁，还体现了 jQuery 遍历的上下文特性——每个方法的执行范围会继承前一个选择器的结果。

二、基础遍历方法：构建你的“DOM 导航工具箱”

1. each()：逐个访问元素的“循环器”

each() 方法是最基础的遍历工具，它类似 JavaScript 的 for 循环，但更易读且功能强大。通过回调函数，可以对每个匹配的元素执行操作。

示例：为所有段落添加背景色

$("p").each(function(index, element) {  
  $(element).css("background-color", "lightyellow");  
  console.log("当前段落索引：" + index);  
});  

比喻：each() 就像一位邮递员，逐个访问街道上的每个房子（元素），并执行分发包裹（操作）的任务。

2. find()：向下探索的“子元素探测器”

find() 方法用于在当前元素的后代中搜索符合条件的元素。它从当前元素开始，向下遍历所有层级的子元素。

示例：高亮表格中的特定行

$("#table-container").find("tr.warning").css("border", "2px solid red");  

此代码在 #table-container 内部查找所有带有 warning 类的表格行，并为其添加红色边框。

3. parent() 与 parents()：向上追溯的“家族树”

• parent()：获取直接父元素。
• parents()：获取所有祖先元素，直到根元素。

示例：折叠与展开导航栏

// 点击子菜单时，高亮其父菜单项  
$(".sub-menu").click(function() {  
  $(this).parent().css("background", "lightblue");  
});  

// 点击时折叠所有父级容器  
$(".close-btn").click(function() {  
  $(this).parents(".modal").hide();  
});  

比喻：parent() 是直接询问“我的爸爸是谁”，而 parents() 则是追溯整个家族谱系。

4. children()：精准定位直接子元素

children() 方法与 find() 类似，但仅返回直接子元素，而非所有后代。这在需要严格控制层级时非常有用。

示例：统计直接子列表项的数量

var count = $("#list-container").children("li").length;  
console.log("直接子列表项数量：" + count);  

三、进阶技巧：灵活组合方法与性能优化

1. 方法链式组合：构建复杂查询

通过将多个遍历方法链式调用，可以实现复杂的元素定位逻辑。例如：

$(".user-profile").find(".bio").parent().siblings(".contact-info").show();  

这段代码的含义是：

1. 选择所有 .user-profile 元素；
2. 在其中查找 .bio 子元素；
3. 获取这些 .bio 元素的父元素；
4. 再找到父元素的兄弟元素 .contact-info；
5. 最后显示这些元素。

比喻：就像拼装乐高积木，每个方法添加一块，最终构建出所需的结构。

2. closest()：向上查找最近匹配的祖先

closest() 方法从当前元素开始，向上逐级查找，直到找到第一个符合条件的祖先元素。这在表单验证或事件委托中非常有用。

示例：表单验证时高亮错误字段的容器

$("input").on("blur", function() {  
  if (!$(this).val()) {  
    $(this).closest(".form-group").addClass("error");  
  }  
});  

3. 性能优化：避免“深”遍历

频繁使用 find() 或 parents() 可能导致性能问题，尤其是当 DOM 结构复杂时。建议：

• 缩小上下文范围：例如用 $("#container").find("div") 而非 $("div")；
• 缓存选择器结果：将常用选择器存储在变量中，避免重复查询。

四、实战案例：构建动态导航菜单

案例需求

实现一个响应式导航栏，要求：

1. 点击菜单项时，高亮当前项并展开子菜单；
2. 鼠标移出菜单时，关闭所有非当前项的子菜单。

实现步骤

1. HTML 结构

<nav id="main-menu">  
  <ul>  
    <li class="menu-item">  
      <a href="#">首页</a>  
    </li>  
    <li class="menu-item">  
      <a href="#">产品</a>  
      <ul class="sub-menu">  
        <li><a href="#">硬件</a></li>  
        <li><a href="#">软件</a></li>  
      </ul>  
    </li>  
  </ul>  
</nav>  

2. jQuery 遍历与事件绑定

$(document).ready(function() {  
  // 点击菜单项时展开子菜单  
  $(".menu-item").on("click", function() {  
    $(this)  
      .addClass("active")          // 高亮当前项  
      .siblings().removeClass("active") // 移除兄弟项的高亮  
      .find(".sub-menu").hide();   // 隐藏兄弟项的子菜单  
    $(this).find(".sub-menu").slideToggle(); // 切换当前子菜单  
  });  

  // 鼠标移出时关闭所有子菜单  
  $("#main-menu").mouseleave(function() {  
    $(".menu-item").removeClass("active")  
      .find(".sub-menu").hide();  
  });  
});  

3. 核心遍历逻辑解析

• siblings()：找到当前菜单项的兄弟元素，确保只保留一个高亮项；
• find()：在当前菜单项内部查找子菜单，避免影响其他层级；
• 链式调用：通过 addClass()、removeClass() 等方法实现状态切换。

五、常见误区与解决方案

误区 1：混淆 find() 和 children()

• 错误代码：

// 意图：获取直接子元素，却用了 find()  
$("#container").find("li").css("color", "red");  

• 修正：使用 children()：

$("#container").children("li").css("color", "red");  

误区 2：忽略上下文的影响

• 错误场景：

$(".child-element").parent().addClass("highlight");  

如果 .child-element 存在多个实例，此代码会为所有父元素添加类，而非当前操作的上下文。

• 修正：通过事件对象或 this 获取当前元素：

$(".child-element").on("click", function() {  
  $(this).parent().addClass("highlight");  
});  

结论

通过本文的讲解，读者应已掌握 jQuery 遍历的核心方法及其应用场景。从基础的 each() 到进阶的 closest()，每个工具都像一把钥匙，帮助开发者精准打开 DOM 的各个“抽屉”。在实际开发中，合理组合遍历方法、优化查询性能，是提升代码质量的关键。

下一步行动：尝试将本文的案例代码复制到本地环境，逐步调试并替换为自己的项目需求。通过实践，你将更深刻地理解遍历逻辑，并在未来的开发中游刃有余地运用这一技术。

希望这篇文章能成为你探索 jQuery 遍历的坚实起点！