jQuery遍历DOM节点操作之filter()方法详解_Javascript教程-查字典教程网

jQuery遍历DOM节点操作之filter()方法详解

摘要：本文实例分析了jQuery遍历DOM节点操作之filter()方法。分享给大家供大家参考，具体如下：.filter(selector)此方法...

本文实例分析了jQuery遍历DOM节点操作之filter()方法。分享给大家供大家参考，具体如下：

.filter(selector)

此方法用于在匹配元素中按照选择器表达式进行筛选。

记住：使用此方法必须得传入选择器表达式参数，不然会报错“'nodeType' 为空或不是对象”

另外请注意这个filter方法和jquery中的find方法的区别:

filter方法是对匹配元素进行筛选，而find方法是对匹配元素的后代元素进行筛选。

从jquery1.4版本开始，filter方法又添加了两个新的用法，现在一共有四种用法了。

下面来具体看看这四种用法：

一、 .filter(selector)

这种用法是在已匹配的元素中按照给定的selector参数（jquery选择器表达式）进行筛选，然后将匹配的元素包装成jquery元素集合返回。这个方法是用来缩小匹配范围的，selector参数可以是多个表达式用逗号连接起来。

来看例子：

HTML代码：

Jquery代码：

$("ul>li").filter(":even").css("color","red"); //将索引为偶数的li背景变为红色

上面的jquery代码和下面的jquery代码效果是一样的

$("ul>li:even").css("color","red"); //将索引为偶数的li背景变为红色

再来看一下选择器表达式用逗号连接起来的用法：

$("ul>li").filter(":even,.item").css("color","blue"); //将索引为偶数和calss为item的li背景变为蓝色

demo示例如下：

<ul> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> <li>55555</li> <li>66666</li> <li>77777</li> </ul> <input type="button" id="test1" value="获取索引为偶数的li"> <input type="button" id="test2" value="获取索引为偶数和calss为item的li"> <script> $(function(){ $("#test1").click(function(){ $("ul>li").filter(":even").css("color","red");//将索引为偶数的li背景变为红色 //这个式子和 $("ul>li:even").css("color","red"); 等效 }); $("#test2").click(function(){ $("ul>li").filter(":even,.item").css("color","blue");//将索引为偶数和calss为item的li背景变为蓝色 }); }); </script>

二、 .filter( function(index) )

这种使用方法是对匹配的元素进行遍历，如果function(index)返回的值为true的话，那么这个元素就被选中，如果返回值为false的话，那么这个元素就不被选中

index参数是当前的匹配元素在原来的元素集合中的索引。

如果您对上面的解释不清楚的话（本人表达能力有点欠缺~^_^），可以好好看看下面的例子：

HTML代码：

jquery代码：

$("div").filter(function(index) { return index == 1 || $(this).attr("id") == "fourth"; }).css("border", "5px double blue");

上面代码的结果是第二个div元素和 id为“fourth”的div元素的边框变成了双线颜色为蓝色

demo示例如下：

三、 .filter( element )

element参数为DOM对象，如果element DOM对象和匹配的元素是同一个元素的话，那么这个元素会被匹配。这种用法是1.4版本新加的，我还没想出来有什么用处

看例子吧：