.eq()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.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>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/eq.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。