.eq()
返回: jQuery
.eq( index )
描述:把匹配的元素集合缩小到指定索引数的那一个。
加入于: 1.1.2
.eq( index )- index类型:Integer一个表示元素的基于0的位置的整型数。
加入于: 1.4
.eq( indexFromEnd )- indexFromEnd类型:Integer一个整型数,表示元素的位置,从集合中最后一个元素往前倒数。
给定一个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" );
这一次,项目4变红了,因为它是集合中从末端开始第二条。
如果一个元素不能在这个特定的基于0的索引上找到,该方法构造了一个带空集的新jQuery对象,而且它的length
属性是0。
$( "li" ).eq( 5 ).css( "background-color", "red" );
这里,没有一个项目变红,因为.eq(5)
表示五项目列表中的第六项。
示例
把带索引号2的div变蓝,并添加一个适当的样式类:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>eq demo</title> <style> div { width: 60px; height: 60px; margin: 10px; float: left; border: 2px solid blue; } .blue { background: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果