为什么要使用jQuery过滤器？

Question

为什么在jQuery中有filter函数可以按类获取和显示/隐藏元素？

$('.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中不存在的东西的操作是相当普遍的。 filter和find之间的差异也非常重要，即使问题中的元素在DOM中也是如此。

Answer 2

从文件中可以看出：

  

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

     

考虑一个包含简单列表的页面：

     

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

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

  

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

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

但如果您指的是.hide()和.show()，那么您可以选择，而不是将代码拆分为css和javascript，您有几种跨浏览器的方法可以做而不是工作。

Answer 3

filter允许你过滤你所拥有的一部分，让我们说我们有一个项目列表，以及我想要添加一个类的所有项目，但是对于它的一部分，我想要添加另一个类：

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

我可以在两个查询中将其拆分。