:eq() 选择器
分类：选择器 > 基本筛选选择器 | 选择器 > jQuery扩展选择器
eq selector
描述：在匹配的集合内，选择索引为n的那个元素。
加入于: 1.0
jQuery( ":eq(index)" )index: 要匹配的元素的基于0的索引。
加入于: 1.8
jQuery( ":eq(-index)" )indexFromEnd: 要匹配的元素的基于0的索引，从最后一个元素开始往前倒数。
索引相关的选择器（:eq()、:lt()、:gt()、:even、:odd）筛选匹配它们的前面的表达式的元素的集合。它们根据元素在匹配集合中的次序来收窄集合。举个例子，如果元素首先是用样式类选择器.myclass选择，并返回四个元素，这些元素分别给予索引号0到3。
注意，因为JavaScript数组使用基于零的索引，这些选择器反映了事实。这就是为什么$( ".myclass:eq(1)" )选择了document中带样式类myclass的第二个元素，而不是第一个。相较之下，:nth-child(n)使用基于1的索引，以顺众CSS规范文档。
在jQuery 1.8以前的版本中，:eq(index)选择器的索引号并不接受一个负值（虽然.eq(index)方法是接受负值的）。
其它说明
- 因为
:eq()是一个jQuery扩展，并不是CSS规范文档的一部分，所以查询:eq()不能充分利用原生DOM提供的querySelectorAll()方法来提高性能。要想在现代浏览器中获得较好的性能，请使用$("your-pure-css-selector").eq(index)来代替它。
示例
找到第三个td。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>eq demo</title> <script src="https://code.jquery.com/jquery-1.10.2.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()或一个循环结构比如说.each()内的:eq()能够选择多个元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.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>
// 把黄色背景色应用到单个<li>上
$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );
// 向每个<ul class="nav">内部的第二个<li>中的文本应用斜体
$( "ul.nav" ).each(function( index ) {
$( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );
});
// 向<ul class="nav">的后代元素应用红色的文本颜色
// 针对每个属于它们的父元素的第二个子元素的<li>
$( "ul.nav li:nth-child(2)" ).css( "color", "red" );
</script>
</body>
</html>
演示结果
通过瞄准倒数第二个<li>，向第二个列表的项目2添加样式类
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>eq demo</title>
<style>
.foo {
color: blue;
background-color: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
$( "li:eq(-2)" ).addClass( "foo" )
</script>
</body>
</html>
演示结果