jQuery 遍历 - eq() 方法 概述
jQuery 2022-06-01 17:58:59小码哥的IT人生shichen
jQuery 遍历 - eq() 方法
实例
通过为 index 为 2 的 div 添加适当的类，将其变为蓝色：
$("body").find("div").eq(2).addClass("blue");
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/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>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
eq() 方法将匹配元素集缩减值指定 index 上的一个。
语法
.eq(index)
| 参数 | 描述 |
|---|---|
| index |
整数，指示元素的位置（最小为 0）。 如果是负数，则从集合中的最后一个元素往回计数。 |
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。
请看下面这个简单的列表：
<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>
例子 1
我们可以把该方法应用到这个列表项目集：
$('li').eq(2).css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>$('li').eq(2).css('background-color', 'red');</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这个调用的结果是为项目 3 设置了红色背景。请注意，index 是基于零的，并且是在 jQuery 对象中引用元素的位置，而不是在 DOM 树中。
例子 2
如果提供负数，则指示从集合结尾开始的位置，而不是从开头开始。例如：
$('li').eq(-2).css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>$('li').eq(-2).css('background-color', 'red');</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这次，项目 4 的背景变为红色，这是因为它是集合结尾开始的第二个。
例子 3
如果无法根据指定的 index 参数找到元素，则该方法构造带有空集的 jQuery 对象，length 属性为 0。
$('li').eq(5).css('background-color', 'red');
完整实例：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:10px; float:left;
border:2px solid blue; }
.blue { background:blue; }
</style>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<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>
<script>$('li').eq(5).css('background-color', 'red');</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
这里，没有列表项会变为红色，这是因为 .eq(5) 指示的第六个列表项。
