jQuery 遍历与筛选页面元素的实现方法

季宁

发布时间：2026-10-14 | 6人浏览过

原创

在使用 jQuery 进行前端开发时，经常需要动态修改页面元素的样式或内容。本方案演示了如何通过 $.each 遍历列表项，并利用正则表达式 RegExp 对文本进行模糊匹配，从而实现轻量级的自动完成或内容筛选功能。

实现原理与目标

该代码片段的主要目标是遍历具有特定类名（如 .lico）的所有列表元素（li），检查其内部文本是否包含指定的搜索值。当匹配成功时，可执行高亮、保留或显示逻辑；若不匹配，则可执行隐藏或清除样式等操作。

第1步：定义搜索参数与正则对象

目的：设置待匹配的字符串，并构建不区分大小写的正则表达式，以确保搜索的灵活性。
操作：声明变量存储搜索关键词，并使用 new RegExp() 创建正则实例。
关键代码：

<script>
// 定义搜索关键词，例如 "teset"
var value = "teset";
// I 标志表示忽略大小写，可根据需求省略
var s = new RegExp(value, "i");
</script>

第2步：遍历指定 DOM 元素

入口：选择器 $(".lico") 选中所有包含该类名的元素。
动作：调用 $.each() 方法遍历匹配到的 DOM 节点集合。
重要参数：回调函数接收索引 i 和 DOM 节点对象 n。
完成状态：脚本将逐个处理每个列表项。

第3步：执行文本筛选与条件判断

步骤：在遍历过程中，使用 $(n).text() 获取当前节点的纯文本内容，并将其传递给正则对象的 test() 方法进行测试。
逻辑分支：

匹配成功：if (s.test($(n).text())) 为真，在此处添加保留元素、添加高亮类名或存储匹配结果的代码。
匹配失败：else 分支，在此处添加隐藏元素、移除样式或跳过处理的代码。

完整示例代码

复制代码代码如下:

<script>
    var value = "teset";
    var s = new RegExp(value, "i"); // i 表示不区分大小写
    
    $(".lico").each(function (i, n) {  // li 列表的 class 名为 lico
        if (s.test($(n).text())) {   // 如果文本中包含搜索值
            // 筛选成功：执行保留或高亮操作
            // 例如：$(n).addClass('highlight');
        } else {
            // 筛选失败：执行隐藏或清除操作
            // 例如：$(n).removeClass('highlight');
        }
    });
</script>

注意事项与排错

在实际使用中，请注意以下几点以确保代码稳定性：
1. 性能优化：如果列表项非常多，建议将搜索过程放在防抖（Debounce）事件中触发，避免用户输入时频繁计算。
2. 转义特殊字符：如果 value 来自用户输入，可能包含正则元字符（如 ., *, [ 等）。在生产环境中，应先对 value 进行转义，或使用其他字符串查找方法（如 .indexOf()）以避免正则解析错误。
3. DOM 结构：确保选择的元素确实存在且未处于已销毁状态，建议在 $(document).ready() 块内执行此段逻辑。

总结

通过结合 jQuery 的遍历方法与原生 JavaScript 的正则表达式，可以快速实现基于文本内容的元素筛选功能。这种方式无需向后端发送请求，响应速度快，适用于简单的客户端过滤场景。以上就是 jQuery 遍历与筛选页面元素实现的详细内容，更多关于 jQuery 技巧的资料请关注本站其它相关文章！