异常教程

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+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发中，jQuery 遍历方法是操作 DOM 结构的核心工具之一。无论是对网页元素进行增删改查，还是实现动态交互效果，开发者都需要通过遍历方法精准定位和操作目标节点。对于编程初学者而言，理解遍历方法的逻辑和应用场景，能显著提升代码效率和开发体验。本文将从基础概念出发，结合实际案例，系统讲解 jQuery 遍历方法的使用技巧，帮助读者建立清晰的思维框架。

一、基础概念与核心逻辑

1.1 什么是 DOM 遍历？

DOM（文档对象模型）是网页内容的树状结构，每个节点代表页面中的一个元素（如 <div>、<p>）或文本片段。遍历方法的作用，就是通过 jQuery 提供的函数，按特定规则在 DOM 树中导航或筛选节点。例如，可以找到某个元素的子节点、父节点，或与之相邻的兄弟节点。

形象比喻：
想象 DOM 树是一棵真实的树，每个节点是树枝或叶子。遍历方法就像“园丁的手”，能按照预设路径（如“向上修剪”“横向平移”“向下生长”）精准操作目标分支。

1.2 jQuery 遍历方法的核心优势

  • 简洁性：相比原生 JavaScript 的复杂循环和条件判断，jQuery 的链式语法极大简化了代码。
  • 灵活性：支持结合选择器（如 :even、:first）和过滤条件，实现精准筛选。
  • 兼容性：自动处理浏览器差异，开发者无需额外适配。

二、核心遍历方法详解

2.1 each()：逐个访问元素的“循环引擎”

each() 是 jQuery 最基础的遍历方法，用于对匹配到的每个元素执行回调函数。其语法为：

$(selector).each(function(index, element) {  
  // 在此操作元素  
});
  • 参数说明：
    • index：当前元素在集合中的索引（从 0 开始）。
    • element：当前元素的原生 DOM 对象（可选参数）。

案例 1：动态改变元素样式

// 为所有 <li> 元素添加背景色  
$("li").each(function(index) {  
  $(this).css("background-color", "lightblue");  
  console.log("当前元素索引：" + index);  
});

注意点：在回调函数中，this 指向当前 DOM 元素，可通过 $(this) 转换为 jQuery 对象，从而调用其他 jQuery 方法。

2.2 上下级遍历：在 DOM 树中“上下移动”

2.2.1 parent() 和 parents()：向上追溯

  • parent()：获取直接父元素。
  • parents()：获取所有祖先元素（直到根节点 <html>）。
// 示例 HTML 结构  
<div class="container">  
  <div class="child">  
    <p>文本内容</p>  
  </div>  
</div>  

// 获取 <p> 的直接父元素（.child）  
$("p").parent().css("border", "2px solid red");  

// 获取 <p> 的所有祖先元素（包括 .container）  
$("p").parents().css("background", "yellow");

2.2.2 children()：向下查找直接子元素

// 选择 .container 的所有直接子 <div>  
$(".container").children("div");

2.3 同级遍历：在 DOM 树中“左右平移”

2.3.1 siblings()：获取兄弟元素

// 为当前元素的兄弟元素添加类名  
$(".target").siblings().addClass("highlight");

2.3.2 next() 和 prev()：邻接元素定位

// 获取当前元素的下一个同级元素  
$(".current").next().css("color", "green");  

// 获取当前元素的上一个同级元素  
$(".current").prev().hide();

2.3.3 eq()：按索引精准定位

// 选择第 3 个 <li>（索引为 2）  
$("li").eq(2).text("这是第三个元素");

三、进阶技巧与常见场景

3.1 结合过滤器实现复杂逻辑

遍历方法常与 jQuery 的过滤方法（如 filter()、not()）或选择器结合，实现精准筛选。例如：

// 选择所有偶数索引的 <li>，并隐藏  
$("li").filter(":even").hide();  

// 排除 class 为 "exclude" 的元素  
$("div").not(".exclude").css("opacity", 0.5);

3.2 性能优化：避免多重选择器

多次使用 find() 或嵌套遍历可能影响性能。建议通过链式调用或缓存结果优化：

// 低效写法：重复查找 .container  
$(".container").find("p").each(...);  
$(".container").find("div").each(...);  

// 高效写法：缓存选择器结果  
const $container = $(".container");  
$container.find("p").each(...);  
$container.find("div").each(...);

四、实战案例：动态生成导航菜单

假设需要根据后端返回的数据，动态生成一个带子菜单的导航栏。通过遍历方法实现结构化操作：

// 示例数据  
const menuData = [  
  {  
    title: "首页",  
    children: [{ title: "关于我们" }, { title: "联系我们" }]  
  },  
  { title: "产品", children: [] },  
  { title: "博客", children: [] }  
];  

// 生成 HTML 结构  
let $nav = $("<nav></nav>");  
$.each(menuData, function(index, item) {  
  let $link = $("<a>").text(item.title).addClass("nav-link");  
  let $subMenu = $("<ul></ul>");  

  // 如果有子菜单，遍历并添加  
  if (item.children.length > 0) {  
    $.each(item.children, function(subIndex, subItem) {  
      $subMenu.append($("<li>").append($("<a>").text(subItem.title)));  
    });  
    $link.append($("<span>▼</span>")); // 添加展开图标  
  }  

  $nav.append($("<li>").append($link).append($subMenu));  
});  

// 将生成的导航栏插入页面  
$("#app").append($nav);

五、总结与展望

jQuery 遍历方法为开发者提供了高效操作 DOM 的工具箱，其简洁的语法和强大的链式调用特性，降低了复杂场景的实现难度。无论是基础的元素筛选，还是结合过滤器的动态生成，开发者都能通过循序渐进的学习，逐步掌握其精髓。

随着现代前端框架（如 React、Vue）的流行，原生 JavaScript 的遍历方法（如 querySelectorAll）也被广泛应用。但 jQuery 的遍历方法因其易用性，仍能在快速开发或兼容旧项目时发挥重要作用。建议读者在实际项目中多加练习，结合具体需求选择最适合的工具，提升开发效率。

通过本文的学习，希望读者能对jQuery 遍历方法有全面的理解，并在后续实践中灵活运用这些技巧，构建更复杂、更高效的网页功能。

最新发布

查看更多文章