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=
</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=
</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.