返回值:jQueryeq(index)

仅返回匹配元素集合中指定的索引位置的元素。

若一个 jQuery 对象代表了一个 DOM 元素集合，.eq() 方法会生成一个新的 jQuery 对象，其中包含指定的元素。所提供的索引值代表元素在集合中的位置。

例如，在页面中有如下一个简单的列表：

  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
  </ul>

我们可以在列表项集合中应用此方法：

  $('li').eq(2).css('background-color', 'red');

上述代码的执行结果是第三个列表项的背景色变成了红色。注意，所提供的索引值是从 0 开始计数的，代表元素在 jQuery 对象中的位置，而不是其在 DOM 树中的位置。

若提供的位置是一个负数的话，则索引值代表从结尾开始计数，而不是从开头开始计数。例如：

  $('li').eq(-2).css('background-color', 'red');

此次的执行结果是第四个列表项的背景变成了红色，因为它是倒数第二个列表项。

若指定的索引位置不存在，该方法会生成一个新的空 jQuery 对象，它的 length 属性值是 0。 

  $('li').eq(5).css('background-color', 'red');

上述代码的执行结果是，没有任何列表项会变成红色，因为 .eq(5) 代表的是第六个列表项。

示例:

为索引值是为 2 的 div 添加适当的 class，将其变成蓝色。

<!DOCTYPE html>
<html>
<head>
<style>
  div { width:60px; height:60px; margin:10px; float:left;
        border:2px solid blue; }
  .blue { background:blue; }
  </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>

<script>



    $("body").find("div").eq(2).addClass("blue");


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

演示: