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

前端之家收集整理的这篇文章主要介绍了jQuery遍历DOM节点操作之filter()方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

方法用于在匹配元素中按照选择器表达式进行筛选。 记住:使用此方法必须得传入选择器表达式参数,不然会报错“'nodeType' 为空或不是对象”

另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选。

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

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

一、 .filter(selector)

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

来看例子:

HTML代码

  • 11111
  • 33333
  • 44444
  • 55555
  • 66666
  • 77777
  • Jquery代码

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

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

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

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

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

    demo示例如下:

  • 11111
  • 33333
  • 44444
  • 55555
  • 66666
  • 77777
  • 获取索引为偶数的li"> 获取索引为偶数和calss为item的li">

    二、 .filter( function(index) )

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

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

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

    HTML代码

    jquery代码

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

    demo示例如下:

    div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }






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

    三、 .filter( element )

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

    看例子吧:

    还是对上面的HTML代码,看jquery代码

    代码如下:

    结果是id为third的div元素边框有变化。

    这个例子举得很鸡肋,大家会说何必这么麻烦呢?还不如直接:

    的确,我也是这样想的,但是既然是1.4版本新加的,那肯定会是有用到的地方的,不会是鸡肋的,只是我的jquery水平还太低,还没发现而已,如果哪位看官有想到用处的话,还望赐教!

    demo示例如下:

    div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }






    $("#test").click(function(){ $("div").filter(document.getElementById("third")).css("border","5px double blue"); });

    四、 .filter(jQuery object)

    这个用法和上面的.filter( element )的用法差不多,只是一个参数为DOM对象,一个参数为jquery对象,我还是感觉比较鸡肋。

    看例子:

    同样是对上面的HTML代码,看jquery代码

    结果是id为third的div元素边框有变化。 同样直接用下面的jquery代码会更好:

    demo示例如下:

    div{ width:60px; height:60px; margin:5px; float:left;border:3px white solid;background:#ff0000 }

    猜你在找的jQuery相关文章