2009四月10
jQuery find() vs filter()
首先感谢CSSrain的这篇jQuery基础—filter()和find()文章。
jQuery API上面是这样介绍filter和find的
filter(expr)
筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
find(expr)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
并且其给出的filter()的示例如下：
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
<script type='text/javascript'>
$("p").filter(".selected");
</script>
<script type='text/javascript'>
$("p").filter(".selected");
</script>
其说返回结果应该为“<p class=”selected”>And Again</p>”
但是本人测试返回结果为”And Again”，甚感不安。。难道API错了？（最后结果证明貌似是这样的，1.3的API也是这么说的）
呵，后来发现原来API并没错（废话 :cool: ）
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
var p_fil = $("p").filter(".selected");
p_fil.removeClass("selected").addClass("p_filter");
p_fil.removeClass("selected").addClass("p_filter");
firebug测试filter结果
区分find和filter本人测试代码如下：
<div class="fin">
<div class="fin"><a href="http://www.xiaoxiaozi.com">小小子测试find</a></div>
</div>
<div class="fil">
<div class="fil">
<p>小小子测试filter</p>
</div>
</div>
<div class="fin"><a href="http://www.xiaoxiaozi.com">小小子测试find</a></div>
</div>
<div class="fil">
<div class="fil">
<p>小小子测试filter</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var $find = $("div").find(".fin");
alert( $find.html() ) ;
/*
<a href="http://www.xiaoxiaozi.com">小小子测试find</a>
*/
var $filter = $("div").filter(".fil");
alert( $filter.html());
/*
<div class="fil">
<p>小小子测试filter</p>
</div>
*/
});
</script>
$(document).ready(function(){
var $find = $("div").find(".fin");
alert( $find.html() ) ;
/*
<a href="http://www.xiaoxiaozi.com">小小子测试find</a>
*/
var $filter = $("div").filter(".fil");
alert( $filter.html());
/*
<div class="fil">
<p>小小子测试filter</p>
</div>
*/
});
</script>
(js代码放进html中居然不高亮了，有点小晕)
返回结果上面已经给出了，下面解释一下。
find():
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。
从所有的DIV开始，找其下面进一步搜索下面的类名为fin的元素。相当于$(“div .fin”)
filter():
筛选出与指定表达式匹配的元素集合。
从所有的div开始，找到所有类名为fil的元素内容
返回类名为fil的DIV下的所有内容
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/04/10/118/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
你好
在Google搜索jquery find进来的
我也是用小张的主机，在群里好像见过你
这是何等的缘分啊，哈哈。
刚接触jQuery，以后还请多指教。
[回复]
@CheonNii
呵呵，确实是缘份。。
互相学习，互相交流。呵呵。
[回复]
[回复]