jQuery eq() Method

Last Updated : 06 Jul, 2023

The eq() method is an inbuilt method in jQuery that is used to locate the selected elements directly and returns an element with a specific index.

Syntax:

$(selector).eq(index)

Parameters: Here the parameter “index” specifies the index of the element.
Can either be positive or a negative number.

NOTE:

The index number always starts at 0, so the first number will have index 0 (not 1).
Using a negative number as an index starts the index count from the end of the list.

jQuery code to show the working of the eq() method:

Example 1: Below code will select the specified elements.

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>

Output:

Example 2: Below code will select the specified elements with negative index.

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>

Output:

jQuery : eq() vs get():

.eq() returns it as a jQuery object, meaning the DOM element is wrapped in the jQuery wrapper, which means that it accepts jQuery functions.
.get() returns an array of raw DOM elements.