:eq(index)

选择在匹配的集合中，索引值等于 index 的元素。

索引值相关的选择器 (:eq(), :lt(), :gt(), :even, :odd)，会在前面提供的选择器筛选出的元素基础上再进行筛选。进一步筛选的依据就是这个元素在原先匹配集合中的顺序。举例来说，如果一开始通过 class 选择器 (.myclass) 选中了 4 个元素，然后这四个元素的索引值会被分配为 0 到 3，之后就可以用这种索引值选择器来进一步筛选了。

注意，由于 JavaScript 数组的索引值是从 0 开始计数的，所以这些选择器也是以 0 开始计数的。例如，$('.myclass:eq(1)') 就能选中文档中 class 是 myclass 的第二个元素，而不是第一个元素。相反，:nth-child(n) 中的 n 是从 1 开始计数的，因为 CSS 规范里是这么设定的。

不像 .eq(index) 方法, :eq(index) 选择器中的 index 不接受负的索引值。例如，$('li').eq(-1) 会选中最后一个 li 元素,而 $('li:eq(-1)') 则什么都选不到。

补充说明:

  • 由于 :eq() 是 jQuery 扩展出来的，它并不是 CSS 规范中的一部分。当使用 :eq() 时，并不会比使用原生的 DOM 方法 querySelectorAll() 性能好。为了在主流浏览器中得到更好的性能，请使用 $("your-pure-css-selector").eq(index) 方法来代替。

示例:

查找第三个 td。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<table border="1">
  <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>

<script>

$("td:eq(2)").css("color", "red");

</script>
</body>
</html>

演示:

示例:

在列表项目中应用三种不同的样式，以此来展示 :eq() 只会选择一个元素，而 :nth-child() 或 :eq() 会像 .each() 一样，有类似循环的构造，从而选择多个元素。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<ul class="nav">
   <li>List 1, item 1</li>
   <li>List 1, item 2</li>
   <li>List 1, item 3</li>
</ul>
<ul class="nav">
  <li>List 2, item 1</li>
  <li>List 2, item 2</li>
  <li>List 2, item 3</li>
</ul>


<script>


// applies yellow background color to a single <li>
$("ul.nav li:eq(1)").css( "backgroundColor", "#ff0" );

// applies italics to text of the second <li> within each <ul class="nav">
$("ul.nav").each(function(index) {
  $(this).find("li:eq(1)").css( "fontStyle", "italic" );
});

// applies red text color to descendants of <ul class="nav">
// for each <li> that is the second child of its parent
$("ul.nav li:nth-child(2)").css( "color", "red" );


</script>
</body>
</html>

演示: