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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。