jQuery参考实例 2.3 根据元素的索引顺序来进行选择

原文：

http://www.lifelaf.com/blog/?p=277

本文翻译自jQuery Cookbook (O’Reilly 2009) 2.3 Selecting Elements by Index Order

需求

用元素的位置顺序来进行选择。

解决方案

根据选择目标的不同，我们可以从以下过滤器中挑选一个来进行实现 — 在jQuery中我们称其为“过滤器”，尽管它们的样子和CSS伪类差不多：

:first
匹配第一个元素
:last
匹配最后一个元素
:even
匹配索引值为偶数的所有元素（索引值从0开始）
:odd
匹配索引值为奇数的所有元素（索引值从0开始）
:eq(n)
匹配索引值为n的那个元素
:lt(n)
匹配索引值小于n的所有元素
:gt(n)
匹配索引值大于n的所有元素

以下面的HTML片段为例：

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>

可以有好几种不同的方法来选择列表中的第一个元素：

jQuery('ol li:first');
jQuery('ol li:eq(0)');
jQuery('ol li:lt(1)');

eq()和lt()过滤器均接受一个数字作为参数，由于索引值从0开始，因此第一个元素的索引值为0，而第二个元素的索引值则为1。

对表格中的行进行不同样式的渲染是很常见的需求，而这可以用:even和:odd过滤器来实现。对于下面的表格代码：

<table>
<tr><td>0</td><td>even</td></tr>
<tr><td>1</td><td>odd</td></tr>
<tr><td>2</td><td>even</td></tr>
<tr><td>3</td><td>odd</td></tr>
<tr><td>4</td><td>even</td></tr>
</table>

可以根据表格中行的索引值来对其增添class属性：

jQuery('tr:even').addClass('even');

为了显示渲染效果，需要在CSS样式表中对相应的class（even）进行定义：

table tr.even {
background: #CCC;
}

最终效果如下图所示：

讨论

就像之前所提到的，元素的索引值从0开始。除开第一个元素的索引值为0这一点，过滤器的使用非常简单明了。另一个值得注意的事情是过滤器需要对元素集来进行匹配，只有在元素集合存在的情况下，索引值才有意义。因此，下面的选择器是不工作的：

jQuery(':even');

事实上，上述语句是可以执行的，但这是因为jQuery在解释选择器的时候进行了错误修正。如果需要的元素集未定义，那么jQuery默认该元素集为整个文档中的所有元素。因此，上述选择器实际上可以工作，因为它和以下选择器完全一致：

jQuery('*:even');

但是一般来说，过滤器左侧用于匹配的元素集是必需的。该元素集也可以是一个已定义的jQuery对象，比如：

jQuery('ul li').filter(':first');

filter方法在一个已定义的jQuery对象（li集合）上运行。

---

翻译：shaochuancs@gmail.com