JQuery eq()用法及代碼示例

eq()方法是一個內置方法jQuery用於直接定位所選元素並返回具有特定索引的元素。

用法:

$(selector).eq(index)

參數：這裏參數“index”指定元素的索引。
可以是正數也可以是負數。

NOTE:

索引號始終從 0 開始，因此第一個數字的索引為 0(而不是 1)。
使用負數作為索引從列表末尾開始索引計數。

顯示 eq() 方法工作原理的 jQuery 代碼：

示例 1：下麵的代碼將選擇指定的元素。

HTML


<!DOCTYPE html>
<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


<!DOCTYPE html>
<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 元素數組。

相關用法

注：本文由純淨天空篩選整理自_shreya_garg_大神的英文原創作品 jQuery eq() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。