jQuery eq()方法：按索引精准锁定单个元素-代码号

在一组匹配的元素中，你往往只需要操作其中某一个。eq() 方是为此而生——它根据指定的索引值，从元素中筛选出对应的那个元素，并返回一个只包含该元素的新 jQuery 对象。

索引从 0 开始计数，这一点与绝大多数编程语言中数组的索引规则一致。eq() 的特别之处在于它还支持负索引：传入负数时，计数方向反转，从匹配的末尾开始往前推算。这种双向索引机制让你从列表尾部定位元素变得非常直观，不用先去计算长度。

为什么我倾向于用 eq() 而不是 :eq() 选择器？

两者在功能上确实相似，但 eq() 作为方法使用，在动态场景下更灵活。你可以在一个变量里保存索引计算结果，然后直接传给 eq()，代码的可读性和可维护性都更好。而 :eq() 是选择器字符串的一部分，需要拼接字符串才能动态变化，写起来不够干净。方法链中使用 eq() 的流畅度远高于在 $() 里嵌入选择器表达式，这和 jQuery 的设计哲学更契合。

语法

$(selector).eq(index)

index 参数是必需的，它可以是一个正整数，也可以是负整数。正索引从 0 开始正向计数，负索引从 -1 开始反向计数（-1 代表之后一个元素）。

课程知识要点

索引基准为 0：eq(0) 对应第一个元素，eq(1) 对应第二个，以此类推。
负索引倒序定位：eq(-1) 直接获取之后一个元素，eq(-2) 获取倒数第二个，免去计算长度的步骤。
返回 jQuery 对象：eq() 不会返回原生 DOM 元素，而是包装好的 jQuery 对象，可以继续链式调用其他方法。
越界处理：当传入的索引超出元素的实际范围时，eq() 返回一个空的 jQuery 对象，不会报错，这给防御性编程留下了空间。

示例一：使用正索引定位元素

这个例子展示了如何用正向索引从一组段落中精确选取第 2 个和第 4 个元素并修改其样式。请留意索引值与视觉顺序之间的对应关系。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>eq() 正索引示例 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // 索引从 0 开始，eq(1) 选中的是第二个段落
            $(".para").eq(1).css({
                "color": "#d93025",
                "fontSize": "22px",
                "fontWeight": "bold"
            });
            // eq(3) 选中的是第四个段落
            $(".para").eq(3).css({
                "color": "#1a73e8",
                "fontSize": "22px",
                "fontWeight": "bold"
            });
        });
    </script>
</head>
<body>
    <h3>eq() 方索引操作</h3>
    <h4>索引从 0 开始，所以第一个元素对应索引 0</h4>
    <p class="para">第一段：学习 HTML</p>
    <p class="para">第二段：学习 CSS</p>
    <p class="para">第三段：学习 JavaScript</p>
    <p class="para">第四段：学习 jQuery</p>
    <p class="para">第五段：学习 Vue</p>
</body>
</html>

运行后你会看到，“学习 CSS”变成了红色粗体，“学习 jQuery”变成了蓝色粗体。其余三个段落保持默认样式。这正是 eq() 基于索引的精准筛选能力。

示例二：使用负索引从末尾挑选

当你不关心共有多少个元素，只知道自己需要倒数某个位置的内容时，负索引的优势就体现出来了。下面的代码从同一组段落中选取之后一个和倒数第三个元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>eq() 负索引示例 · 编程学习</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            // eq(-1) 选中之后一个段落
            $(".para").eq(-1).css({
                "color": "#d93025",
                "fontSize": "22px",
                "fontWeight": "bold"
            });
            // eq(-3) 选中倒数第三个段落
            $(".para").eq(-3).css({
                "color": "#1a73e8",
                "fontSize": "22px",
                "fontWeight": "bold"
            });
        });
    </script>
</head>
<body>
    <h3>eq() 方法负索引操作</h3>
    <p class="para">第一段：学习 HTML</p>
    <p class="para">第二段：学习 CSS</p>
    <p class="para">第三段：学习 JavaScript</p>
    <p class="para">第四段：学习 jQuery</p>
    <p class="para">第五段：学习 Vue</p>
</body>
</html>

这次，“学习 Vue”（之后一个）显示为红色，“学习 JavaScript”（倒数第三个）显示为蓝色。你会发现用 eq(-1) 取之后一个元素，比先获取长度再减一的做法要干净不少。

个人经验与实用建议

在项目里，我经常在两种典型场景中使用 eq()。一是表格操作：表格行是一个自然的有序，用 eq() 可以快速拿到某一行进行高亮、展开等操作。二是标签页切换：标签按钮和内容面板通常一一对应，通过 eq() 按索引匹配激活状态，逻辑非常清晰。

一个容易忽略的细节是 eq() 返回的是 jQuery 对象，不是原生 DOM。如果你需要原生 DOM 元素来做一些非 jQuery 的操作，可以用 $(".list").eq(2)[0] 或者直接用 jQuery 提供的 .get() 方法。我个人更倾向于用 .get(index) 来获取原生元素，语义上更明确，代码阅读者也更容易理解你的意图。

本文标签：

jQuery eq()方法：按索引精准锁定单个元素

语法

课程知识要点

示例一：使用正索引定位元素

示例二：使用负索引从末尾挑选

个人经验与实用建议

感谢您的认可和支持