需求
用元素的位置顺序来进行选择。
解决方案根据选择目标的不同,我们可以从以下过滤器中挑选一个来进行实现 —在jQuery中我们称其为“过滤器”,尽管它们的样子和CSS伪类差不多:
:first以下面的HTML片段为例:
可以有好几种不同的方法来选择列表中的第一个元素:
jQuery('ol li:first');eq()和lt()过滤器均接受一个数字作为参数,由于索引值从0开始,因此第一个元素的索引值为0,而第二个元素的索引值则为1。
对表格中的行进行不同样式的渲染是很常见的需求,而这可以用:even和:odd过滤器来实现。对于下面的表格代码:
0 | even |
1 | odd |
2 | even |
3 | odd |
4 | even |
可以根据表格中行的索引值来对其增添class属性:
jQuery('tr:even').addClass('even');为了显示渲染效果,需要在CSS样式表中对相应的class(even)进行定义:
table tr.even { 最终效果如下图所示:
就像之前所提到的,元素的索引值从0开始。除开第一个元素的索引值为0这一点,过滤器的使用非常简单明了。另一个值得注意的事情是过滤器需要对元素集来进行匹配,只有在元素集合存在的情况下,索引值才有意义。因此,下面的选择器是不工作的:
jQuery(':even');事实上,上述语句是可以执行的,但这是因为jQuery在解释选择器的时候进行了错误修正。如果需要的元素集未定义,那么jQuery默认该元素集为整个文档中的所有元素。因此,上述选择器实际上可以工作,因为它和以下选择器完全一致:
jQuery('*:even');但是一般来说,过滤器左侧用于匹配的元素集是必需的。该元素集也可以是一个已定义的jQuery对象,比如:
jQuery('ul li').filter(':first');filter方法在一个已定义的jQuery对象(li集合)上运行。