jQuery eq() with Examples
The eq() method is an inbuilt method in jQuery which is used to locate the selected elements directly and returns an element with 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.
Please Login to comment...