通常把这两个函数,filter()函数和find()函数称为筛选器。
下面的例子分别使用filter函数和find函数对一组列表进行筛选操作。
一组列表:
1 <li>1</li> 2 <li class="f">2</li> 3 <li><a>3</a></li> 4 <li>4</li> 5 <li>5</li>
filter()函数
1 $('li').filter('.f').addClass('filter');
find()函数
1 $('li').find('a').addClass('find');
完整的html代码:
1 <html> 2 <head> 3 <title>filter和find函数</title> 4 <script src="jquery.js"></script> 5 </head> 6 <body> 7 <li>1</li> 8 <li class="f">2</li> 9 <li><a>3</a></li> 10 <li>4</li> 11 <li>5</li> 12 </body> 13 <script> 14 $('li').filter('.f').addClass('filter'); 15 $('li').find('a').addClass('find'); 16 </script> 17 </html>
在chrome浏览器中,运行效果如下:
1 <html><head> 2 <title>filter和find函数</title> 3 <script src="jquery.js"></script> 4 </head> 5 <body> 6 <li>1</li> 7 <li class="f filter">2</li> 8 <li><a class="find">3</a></li> 9 <li>4</li> 10 <li>5</li> 11 12 <script> 13 $('li').filter('.f').addClass('filter'); 14 $('li').find('a').addClass('find'); 15 </script> 16 </body></html>
filter()函数从li标签中筛选出含有类f的li标签,推测是在同级筛选。
find()函数从li标签中找到a标签,推测是在后代中查找。