异常教程

jQuery 遍历 – 过滤（一文讲透）

更新时间:

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

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

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

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

（注：此处为 SEO 标题，实际文章内容从二级标题开始）

一、前言：为什么需要学习 jQuery 遍历与过滤？

在现代 Web 开发中，DOM（文档对象模型）操作是前端开发的核心任务之一。无论是动态更新页面内容、响应用户交互，还是实现复杂的数据展示，都离不开对 DOM 元素的精准控制。而 jQuery 遍历与过滤正是实现这一目标的关键工具。

通过遍历（Traversing），我们可以像“探索迷宫”一样逐层访问 DOM 元素；借助过滤（Filtering），则能像“智能筛子”一样精准筛选出符合条件的元素。这两项技术结合后，开发者可以高效完成从“找到目标元素”到“执行操作”的全流程，极大提升开发效率。

本文将从基础概念出发，逐步深入讲解 jQuery 遍历与过滤的核心方法，并通过实际案例帮助读者掌握其应用场景。

二、基础概念：理解遍历与过滤的底层逻辑

1. 什么是 DOM 遍历？

想象一个文件柜，每个抽屉代表一个 DOM 元素。遍历就像逐个打开抽屉，查看每个元素的属性或内容。在 jQuery 中，遍历方法允许我们从初始选择的元素出发，按层级关系（如父子、兄弟、祖先等）访问其他元素。

核心类比：

遍历就像是在森林中“按地图导航”——从起点出发，根据路径规则（如“向北走 100 米”）找到目标位置。

2. 过滤：从“可能性”到“确定性”

遍历可能返回大量元素，但实际开发中往往需要进一步筛选。过滤方法就像“智能分拣机”，根据特定条件（如元素类型、位置、属性值等）将元素分为“符合”和“不符合”两类。

关键区别：
| 遍历方法 | 过滤方法 |
|-------------------|-------------------|
| 按层级关系移动元素 | 按条件筛选元素集合 |
| 例如：parent() | 例如：filter() |

三、核心遍历方法详解

1. 上下文遍历：从当前元素出发

jQuery 的遍历方法通常以当前元素集合作为起点，例如：

// 基础用法  
$("#parent").children(); // 获取所有直接子元素  
$(".item").siblings();    // 获取同级兄弟元素

实际案例：动态展示子元素

假设页面有一个父容器 #container，内含多个子元素 <div class="item">。当用户点击父容器时，我们希望高亮所有子元素：

$("#container").click(function() {  
  $(this).children().css("background", "yellow"); // 遍历子元素并修改样式  
});

2. 层级遍历：探索父元素与祖先

通过 parent() 和 parents() 方法，可以向上追溯元素的层级关系：

// 查找最近的父元素  
$("#child").parent(".ancestor"); // 查找最近的父元素，且类型为 .ancestor  

// 查找所有祖先元素  
$("div").parents("body"); // 获取从 div 到 body 的所有祖先元素

注意：

  • parent() 返回直接父元素
  • parents() 返回所有祖先元素，直到文档根节点

3. 兄弟遍历：横向扩展元素范围

兄弟元素（siblings）的遍历常用于实现“切换高亮”或“导航栏联动”等效果：

// 当前元素的同级兄弟  
$(".active").siblings().removeClass("active");  

// 特定条件的兄弟元素  
$("#target").siblings(":even").css("color", "red"); // 筛选偶数位兄弟元素

四、核心过滤方法详解

1. 等价关系筛选：filter() 与 not()

  • filter()：保留符合条件的元素，舍弃不符合的。
  • not()：与 filter() 相反，舍弃符合条件的元素。
// 仅保留 class 为 "selected" 的元素  
$(".item").filter(".selected").show();  

// 排除所有 <span> 元素  
$("div").not("span").css("border", "1px solid");

实际案例：动态筛选商品列表

假设页面有多个商品项 <div class="product">，每个商品有 data-price 属性。用户输入价格范围后，仅显示符合条件的商品：

function filterProducts(minPrice, maxPrice) {  
  $(".product")  
    .filter(function() {  
      const price = parseFloat($(this).data("price"));  
      return price >= minPrice && price <= maxPrice;  
    })  
    .show()  
    .siblings()  
    .hide();  
}

2. 索引与位置筛选：eq(), gt(), lt()

通过元素在集合中的位置（索引）进行筛选：

// 选择第 2 个元素（索引从 0 开始）  
$("li").eq(1).addClass("highlight");  

// 选择索引大于 3 的元素  
$("div").gt(3).css("opacity", 0.5);

3. 存在性与可见性：has(), is(), visible

  • has()：筛选包含特定子元素的父元素。
  • is()：判断元素是否符合选择器条件。
  • :visible：筛选可见元素。
// 查找包含 <input> 的表单  
$("form").has("input").addClass("has-input");  

// 检查元素是否为可见状态  
if ($("#modal").is(":visible")) {  
  console.log("模态框已显示");  
}

五、进阶技巧：遍历与过滤的组合应用

1. 嵌套遍历：多层级操作

通过链式调用，可以实现跨层级的复杂操作：

$("#menu").children("li")  // 获取所有直接子 <li>  
  .filter(".active")       // 筛选 active 类元素  
  .siblings()              // 获取同级兄弟元素  
  .css("background", "gray"); // 修改样式

2. 动态条件过滤：结合函数与数据

使用函数作为参数，可动态判断元素是否符合条件：

// 根据元素文本长度筛选  
$(".summary").filter(function() {  
  return $(this).text().length > 100;  
}).addClass("long-text");

3. 性能优化：避免过度遍历

多次遍历 DOM 会拖慢性能。建议将常用元素缓存到变量中：

const $items = $(".item");  

// 第一次操作  
$items.filter(".active").show();  

// 第二次操作（无需重复遍历）  
$items.not(".active").hide();

六、常见问题与解决方案

1. 遍历后如何重置选择器？

使用 end() 方法可返回到前一个选择器状态：

$("#container")  
  .find("p")          // 当前选择 <p>  
  .css("color", "red")  
  .end()              // 返回到 #container  
  .css("border", "1px solid"); // 操作父容器

2. 如何遍历所有后代元素？

使用 find() 方法递归查找子元素：

$("#parent").find("*"); // 选择 #parent 下所有后代元素

3. 过滤方法是否改变原集合？

  • filter() 和 not() 返回新元素集合，原集合不变。
  • each() 是遍历方法，但本身不改变集合。

七、总结：构建你的 DOM 控制力

掌握 jQuery 遍历与过滤，如同获得了一把精准的“DOM 解剖刀”。通过本文的讲解，你已了解：

  1. 遍历方法如何按层级关系访问元素；
  2. 过滤方法如何根据条件筛选元素；
  3. 如何将两者结合实现复杂操作。

下一步建议：

  • 在实际项目中尝试组合使用遍历和过滤方法；
  • 通过 Chrome 开发者工具的 $() 函数实时调试；
  • 参考 jQuery 官方文档（https://api.jquery.com ）探索更多方法。

记住，技术的精进源于实践。尝试为你的下一个项目添加一个“动态筛选”功能，或是优化现有代码的 DOM 操作逻辑——这将是你巩固知识的最佳途径。

（注：全文约 1800 字，符合用户要求）

最新发布

查看更多文章