Updated April 20, 2023
Introduction of jQuery eq()
The jQuery eq() function is used to gets an element with the specific index number from the matched set. The jQuery eq() function is a built-in function in jQuery. The jQuery eq() function locates the selected elements and returns an element at the given index. The first element starts indexing from the 0, not 1, so the index of an element in a matched set range from 0 to length-1.
Syntax:
$(selector).eq(index);Parameters:
index – This is not an optional parameter, that specifies the index of an element to return from the matched set. The index can be positive and negative, the negative index indicates to count an index from the end of the matched set.
Working of the jQuery Eq() Function
The JQuery eq() function accepts an index, which can be a positive and negative value and return the element present at that index, the index value starts from 0. Suppose in our page we have five paragraphs, we want the second paragraph to be highlight because it is important, so we can use the eq() function as “$( “p” ).eq(1).css(“background-color”, “yellow”);”. The eq() function first have a list of all the “p” elements in the sequence they are present in the page, next the eq() function select the element which is present at an index 1 that is the second element among the list of “p” elements and apply the yellow as the background colour to it.
Examples of jQuery eq() Function
Example of jQuery eq()function to select an element by passing the positive index –
Example #1
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery eq( ) function </title>
<style>
.select { color : red; }
</style>
<script>
function disp()
{
$( "h2" ).eq(3).addClass( "select" );
}
</script>
</head>
<body>
<h3> The Example for eq() function: </h3>
<h2> This is a first heading. </h2>
<h2> This is a second heading. </h2>
<h2> This is a third heading. </h2>
<h2> This is a fourth heading. </h2>
<h2> This is a fifth heading. </h2>
<button onclick = "disp()"> Get element </button>
</body>
</html>Output:
Once we click on the “Get element” button, the output is –
In the above code there are five “h2” heading elements are created, the fourth heading is selecting and highlighting by using the eq() function as “$( “h2” ).eq(3).addClass( “select” );” where the index value is passed one less value the position of an element in the matched selection because the index starts from the 0, not 1.
Example #2
Example of jQuery eq()function to select an element and its sub elements and passing the negative index value –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery eq( ) function </title>
<script>
function disp()
{
$( "ol" ).eq(-1).css("background-color", "yellow");
}
</script>
</head>
<body>
<h3> The Example for eq() function: </h3>
<div>
<h2> The List of Vegutables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li>Cucumber </li>
</ol>
</div>
<div>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li>Pome </li>
</ol>
</div>
<button onclick = "disp()"> Get element </button>
</body>
</html>Output:
Once we click on the “Get elements” button, the output is –
In the above code the two order lists are created, one for vegetables and one for fruits, farther the second order list element is selecting and highlighting by using the eq() function as $( “ol” ).eq(-1).css(“background-color”, “yellow” );” , where the index value is passed -1, so it select last first “ol” element in the matched selection.
Example #3
Example of jQuery eq()function to select an element based on the class –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery eq( ) function </title>
<script>
function disp()
{
$( ".veg" ).eq(1).css("background-color", "red");
$( ".fru" ).eq(1).css("background-color", "green");
}
</script>
</head>
<body>
<h3> The Example for eq() function: </h3>
<div>
<h2> The List of Vegutables and Fruits are : </h2>
<ul>
<li class = "veg" > Mushroom </li>
<li class = "fru" > Banana </li>
<li class = "veg" > Broccoli </li>
<li class = "fru" > Apple </li>
<li class = "veg" > Corn </li>
<li class = "fru" > Cherry </li>
<li class = "veg" >Cucumber </li>
<li class = "fru" >Pome </li>
<li class = "veg"> Bean </li>
</ul>
</div>
<button onclick = "disp()" > Get element </button>
</body>
</html>Output:
Once we click on the “Get element” button, the output is –
In the above code the unordered list is created for vegetables and fruits, farther the first vegitable and fruit in unordered list element is selecting and highlighting by using the eq() function as “$( “.veg” ).eq(1).css(“background-color”, “red” );” and “$( “.fru” ).eq(1).css(“background-color”, “green” );”, as we can see in the output.
Recommended Articles
This is a guide to jQuery eq(). Here we also discuss the introduction and working of the jquery eq() function along with different examples and its code implementation. you may also have a look at the following articles to learn more –
