jQuery eq() Method

Quiz

The eq() method in jQuery is used to reduce the set of matched elements to the one at the specified index.

The method takes an argument called "index," which indicates the position of the element. This index can be either positive or negative. The index value will start from 0 and so on. That means the first element will have an index number 0.

If we provide a "negative" value as an index, it will start the index count from the end of the selected elements rather than the beginning.

Syntax

Following is the syntax of eq() method in jQuery −

$(selector).eq(index)

Parameters

This method accepts the following parameter −

index: An integer specifying the index of the element. It can be either positive or negative number.

Example 1

In the following example, we are using the eq() method to select the second list item and highlights it when clicked −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('li').eq(1).css("background-color", "yellow");
});
</script>
</head>
<body>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</body>
</html>

When we execute the above program, second item (index 1) will have a yellow background.

Example

The following example modifies the text of the third paragraph −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('p').eq(2).text('This paragraph has been modified.');
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>

When we execute the above program, third paragraph (index 2) will be modified.

Example 2

In the below example, we are providing a negative index value as a parameter to eq() method −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $('p').eq(-2).hide();
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>
</body>
</html>

When we execute the above program, eq() will start the index count from the end of the selected elements hides the second element from the end.

jquery_ref_traversing.htm

Print Page