jquery - 为什么要使用 jQuery 过滤器？

Question

当您可以按类获取和显示/隐藏元素时，为什么jQuery中有过滤功能？

$('.yourClass');

Answer 1

仅仅因为您有一些想要使用的元素并不意味着它们就在 DOM 中。考虑这个人为的例子：

var $els = $('<div class="a"></div><div class="b"></div>');
console.log($('.a'));
console.log($els.find('.a'));
console.log($els.filter('.a'));​

演示：http: //jsfiddle.net/ambiguous/h3GMB/

第一个，$('.a')，什么都没有，因为$els还没有在 DOM 中。第二个也没有给你任何东西，因为find搜索后代。只有第三个会为您提供所需的内容，因为filter减少了：

匹配元素的集合到匹配选择器的元素 [...]

在为 DOM 准备模板块时，这种对 DOM 之外的事物的操作相当普遍。即使有问题的元素在DOM 中，filter和之间的区别find也相当重要。

Answer 2

从文件来看：

给定一个表示一组 DOM 元素的 jQuery 对象，.filter() 方法从匹配元素的子集构造一个新的 jQuery 对象。提供的选择器针对每个元素进行测试；与选择器匹配的所有元素都将包含在结果中。

考虑一个带有简单列表的页面：

我们可以将此方法应用于列表项集：

$('li').filter(':even').css('background-color', 'red');

此调用的结果是项目 1、3 和 5 的红色背景，因为它们与选择器匹配（回想一下 :even 和 :odd 使用基于 0 的索引）。

过滤器功能用于将原始查询的结果过滤到特定元素中。

但是，如果您指的是.hide()and .show()，这是您的选择，而不是将您的代码拆分为 css 和 javascript，您可以使用一些跨浏览器的方法来完成这项工作。

Answer 3

filter允许您过滤您拥有的集合的一部分，假设我们有一个项目列表，并且我想为所有项目添加一个类，但对于其中的一部分我想添加另一个类：

$('#mylist li').addClass('someclass').filter('.someotherclass').addClass('filtered');

我可以把它分成两个查询。