当前位置:Web前端 > jquery> 正文

jquery中filter

时间:2014-11-20类别:Web前端

jquery中filter

jquery中filter

filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。

filter方法中的参数可以为字符串值,包含供匹配当前元素集合的选择器表达式。

一、filter的参数类型可分为两种

1、传递选择器

$('a').filter('.external')

2、传递过滤函数

  • JScript 代码   复制
  • 
    $('a').filter(function(index) {
            return $(this).hasClass('external');
        })
    
    		
  • 二、Jquery中find与filter区别

    1、find()会在li元素内 寻找 class为classname的元素。
    2、filter()则是筛选li的class为classname的元素。
    3、基本是find子元素找,filter是平级找


    4、find 函数是在当前对象集合的子元素中进行查询;
    5、filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围;
    6、find 函数的参数是 jQuery 选择器表达式;


    7、filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系);
    8、filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数, 函数需返回 true或false 以选中或排除元素.
     

    例如

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>Document</title> 
    <script> 
    $(function(){ 
    $('#btn1').click(function(){ 
    alert($('li').find('.test').html()); 
    }); 
    $('#btn2').click(function(){ 
    alert($('li').filter('.test').html()); 
    }); 
    $('#btn3').click(function(){ 
    alert($('li').filter('.last').html()); 
    }); 
    $('#btn4').click(function(){ 
    alert($('li').filter('.first,.last').html()); 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
    <input type="button" value="test-find" id="btn1" /> 
    <input type="button" value="test-filter" id="btn2" /> 
    <input type="button" value="test-filter" id="btn3" /> 
    <input type="button" value="test-filter" id="btn4" /> 
    <li class="first">first content<span class="test">test content</span></li> 
    <li class="last">last<span class="test">last test content</span></li> 
    <li class="last">last<span>last no test content</span></li> 
    </body> 
    </html> 
    
    		
  • 标签:
    上一篇下一篇

    猜您喜欢

    热门推荐