jQuery filter()方法：从元素集合中精准筛选目标-代码号

当你通过选择器拿到一组元素后，往往还需要从中进一步挑出符合条件的子集。filter() 方法就是专门做这件事的——它根据你指定的规则，对当前元素进行筛选，匹配的元素留下，不匹配的从中移除，最终返回一个只包含符合条件元素的新 jQuery 对象。

filter() 支持两种筛选方式：传入选择器字符串或传入回调函数。选择器方式简单直接，适合条件明确的静态筛选；回调函数则提供了更大的灵活性，你可以在函数内部编写任意复杂的判断逻辑来决定元素的去留。

为什么我在动态筛选场景下更倾向用函数参数而不是选择器？

选择器虽然简洁，但它的表达能力受限于 CSS 选择器语法本身。当筛选条件涉及元素自身状态、索引位置或外部变量时，选择器就无能为力了。而回调函数可以访问元素索引，也可以用 $(this) 获取当前元素的 jQuery 对象，实现任意逻辑判断。这种能力让 filter() 在处理复杂业务时比纯选择器可靠得多。

语法

使用选择器过滤：

$(selector).filter(selector)

使用函数过滤：

$(selector).filter(function(index) {
    // 返回 true 保留该元素，返回 false 移除
})

参数说明：

selector：可选。一个 jQuery 对象、选择器表达式，或者用逗号分隔的多个选择器（如 "#id1, .class2"），用于筛选匹配的元素。
function(index)：可选。为中的每个元素执行一次的回调函数。index 是当前元素在中的位置（从 0 开始）。函数返回 true 时保留该元素，返回 false 时将其从结果集中移除。

课程知识要点

不修改原始：filter() 返回一个新的 jQuery 对象，原始的元素保持不变，可以继续用于其他操作。
多种过滤表达式：可以传入类选择器、ID 选择器、属性选择器等，多个选择器用逗号分隔即可实现复合筛选。
函数过滤的核心在于 return：回调函数必须显式返回 true 或 false，没有返回值或返回 undefined 会导致元素被移除。
索引从 0 开始：回调中的 index 参数反映元素在原中的顺序位置，与 eq() 的索引规则一致。
与 find() 的区别：filter() 是从当前中筛选，find() 是向下查找后代元素，两者的作用层级不同，不要混淆。

示例一：使用选择器筛选特定元素

这个例子展示了如何从页面所有 p 元素中，只选出带有 featured 类的那些段落并高亮显示。页面中混杂了其他元素，但 filter() 只关心符合选择器条件的 p。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>filter() 选择器筛选 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            font-size: 20px;
            font-weight: bold;
            margin: 5px 0;
        }
    </style>
    <script>
        function filterBySelector() {
            $(document).ready(function () {
                // 从所有 p 元素中筛选出类名为 featured 的
                $("p").filter(".featured").css({
                    "background": "#fff3cd",
                    "padding": "8px"
                });
            });
        }
    </script>
</head>
<body>
    <h2>编程课程目录</h2>
    <h4>使用 filter() 按类名筛选段落元素</h4>
    <div id="div1">这是第一个 div 元素</div>
    <p class="featured">段落一：JavaScript 入门（精华）</p>
    <div id="div2">这是第二个 div 元素</div>
    <p class="featured">段落二：Python 数据分析（精华）</p>
    <p>段落三：通用编程基础</p>
    <p class="featured">段落四：Vue 前端框架（精华）</p>
    <p>点击下方按钮查看筛选效果：</p>
    <button onclick="filterBySelector()">筛选精华内容</button>
</body>
</html>

点击按钮后，只有三个带有 featured 类的段落背景变黄。div 元素和无类名的段落不受影响。这就是选择器参数的直接筛选效果，适合条件固定的场景。

示例二：使用函数按索引位置筛选

某些情况下，你需要依据元素在中的位置来做判断。下面的代码用回调函数筛选出索引为 1、3、5 的元素，也就是中的偶数位置元素（索引从 0 起算，视觉效果上对应第 2、4、6 项）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>filter() 函数筛选 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        p {
            font-size: 20px;
            font-weight: bold;
            margin: 5px 0;
        }
    </style>
    <script>
        function filterByFunction() {
            $(document).ready(function () {
                $("p").filter(function (index) {
                    // 只保留索引为 1、3、5 的元素
                    return index === 1 || index === 3 || index === 5;
                }).css({
                    "background": "#fff3cd",
                    "padding": "8px"
                });
            });
        }
    </script>
</head>
<body>
    <h2>编程语言列表</h2>
    <h4>使用 filter() 按索引位置筛选（保留偶数位）</h4>
    <p class="lang1">P0：HTML</p>
    <p class="lang2">P1：CSS</p>
    <p class="lang3">P2：JavaScript</p>
    <p class="lang4">P3：Node.js</p>
    <p class="lang5">P4：Python</p>
    <p class="lang6">P5：Go</p>
    <p>点击下方按钮查看筛选效果：</p>
    <button onclick="filterByFunction()">按索引筛选</button>
</body>
</html>

运行后你会看到，P1、P3、P5 被高亮，其余段落保持原样。用函数筛选的优势在于，你可以在这个函数里写任何条件——访问元素内容、判断某个属性值、甚至结合外部状态变量来做决策，灵活度远超纯选择器。

在工作中，我有一条习惯：能用选择器解决的，直接用选择器；选择器表达不了的，果断用函数。 比如筛选带有特定类名或属性的元素，选择器一行搞定，简洁且高效。但一旦涉及“保留前 3 个”、“删除内容为空的元素”、“只选包含特定文本的项”这类需求，立即切换到函数模式，不要硬用选择器拼凑。

filter() 经常和 not() 搭配使用。一个负责“要什么”，一个负责“不要什么”。当你觉得筛选条件写成双重否定更自然时，不妨换成 not()，它本质上就是 filter() 的反向操作，两者在同一个遍历链中协作能让代码逻辑十分清晰。

本文标签：

jQuery filter()方法：从元素集合中精准筛选目标

语法

课程知识要点

示例一：使用选择器筛选特定元素

示例二：使用函数按索引位置筛选

感谢您的认可和支持