.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>
演示结果