jQuery filter()

在 jQuery 中，filter() 方法被用于根据指定的标准筛选元素集合，而不会改变原始集合中的元素。该方法可以接受一个函数或选择器作为参数，函数将处理集合中的每个元素，并通过返回 true 或 false 来决定是否包含该元素。选择器也可以作为参数，筛选只有与选择器匹配的元素。

语法格式

$(selector).filter(function(index, element){
    // 处理函数
});

$(selector).filter(filter);

其中：

• selector：必需，jQuery 选择器，代表需要筛选的元素；
• function(index, element)：函数，必需，该函数在集合中的每个元素上被调用一次，用于检查该元素是否满足指定条件，接受两个参数分别是当前元素在集合中的索引值和对应的 DOM 元素对象；
• filter：必需，可以是选择器字符串、jQuery 对象、HTML 元素或用于匹配 DOM 元素的函数，用于筛选元素集合。

返回值

返回一个新的 jQuery 对象，其中仅包含满足指定筛选条件的元素。如果没有元素满足指定条件，则返回一个空 jQuery 对象。

简单示例

筛选类名包含 'active' 的元素

<ul>
    <li class="active">第一项</li>
    <li>第二项</li>
    <li class="active">第三项</li>
    <li>第四项</li>
</ul>

$('li').filter('.active').css('color', 'red');

效果：将类名包含 active 的两个元素的颜色都设置为红色。

根据索引值筛选元素

<ul>
    <li class="active">第一项</li>
    <li>第二项</li>
    <li class="active">第三项</li>
    <li>第四项</li>
</ul>

$('li').filter(function(index){
    return index === 0 || index === 3;
}).css('color', 'gray');

效果：将索引值为 0 和 3 的元素的颜色都设置为灰色。

注意事项

• filter() 方法不会改变原始集合中的元素集合，而是返回一个新的 jQuery 对象，其中仅包含满足指定筛选条件的元素；
• 如果 filter() 方法的参数是 DOM 元素或 jQuery 对象，将会对集合进行类似于 .is() 方法的操作，返回一个新的 jQuery 对象，其中仅包含部分或全部匹配的元素；
• 如果 filter() 方法的参数是用于匹配 DOM 元素集合的函数，则对集合中的每个元素都将调用一次该函数，函数返回值为 true 则保留该元素，否则删除该元素；
• filter() 方法可以链式调用，也可以组合使用多次以获得更精确的结果；
• filter() 方法传入自定义函数时，通常需要谨慎处理函数中的 this 对象和参数列表；
• 开发者可以自行组合使用多个 filter() 函数，以生成复杂的筛选逻辑。