通常把这两个函数,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标签,推测是在后代中查找。