JQuery eq()用法及代码示例

jQuery是一个非常强大的工具，可以帮助我们结合各种DOM遍历方法来随机或按顺序选择文档中的元素。大多数DOM遍历方法不会修改元素，否则会在给定条件下将其过滤掉。
eq()方法是jQuery中的内置方法，用于直接定位所选元素并返回具有特定索引的元素。
用法:

$(selector).eq(index)

参数：在此，参数“index”指定元素的索引。
可以是正数或负数。
注意：

索引号始终从0开始，因此第一个数字将具有索引0(而不是1)。
使用负数作为索引会从列表末尾开始索引计数。

jQuery代码显示eq()方法的用法方式：
代码1：
下面的代码将选择指定的元素。

<html> 
  
<head> 
    <title>GeeksForGeeks articles</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/ 
                 jquery/3.3.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $(".heading").eq(0).css("color", "red"); 
            $(".heading").eq(2).css("color", "yellow"); 
        }); 
    </script> 
</head> 
  
<body> 
    <h1 class="heading">GeeksForGeeks</h1> 
    <h2 class="heading">GeeksForGeeks</h2> 
    <h3 class="heading">GeeksForGeeks</h3> 
    <h4 class="heading">GeeksForGeeks</h4> 
</body> 
  
</html>

输出：

代码2：
下面的代码将选择带有负索引的指定元素。

<html> 
  
<head> 
    <title>GeeksForGeeks articles</title> 
    <script src="https://ajax.googleapis.com/ajax/ 
                 libs/jquery/3.3.1/jquery.min.js"></script> 
  
    <script type="text/javascript"> 
        $(document).ready(function() { 
            $(".heading").eq(-2).addClass("style"); 
            $(".heading").eq(-4).addClass("style"); 
  
        }); 
    </script> 
    <style> 
        .style { 
            color: red; 
            font-family: fantasy; 
            font-size: 20px; 
        } 
    </style> 
</head> 
  
<body> 
    <ul> 
        <li class="heading">GeeksForGeeks</li> 
        <li class="heading">GeeksForGeeks</li> 
        <li class="heading">GeeksForGeeks</li> 
        <li class="heading">GeeksForGeeks</li> 
    </ul> 
</body> 
  
</html>

输出：

jQuery：eq()与get()

.eq()作为jQuery对象返回它，这意味着DOM元素包装在jQuery包装器中，这意味着它接受jQuery函数。
.get()返回原始DOM元素的数组。

相关用法

注：本文由纯净天空筛选整理自ShreyaGarg10大神的英文原创作品 jQuery | eq() with Examples。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。