Updated April 19, 2023
Definition of jQuery index
The jQuery index() function is used to return the index of the specific element with respect to the selector. The jQuery index() function is a built-in function in jQuery. The jQuery index() function searches for the specified element among the matched elements, if the element is found it, then it returns the index of the element, if the element is not found in the matched elements, then it returns -1. If no parameter is passed to the index() function, then it returns the position of the first element present within the jQuery object.
Syntax:
$(selector). index(element);Parameters:
- element – This is an optional parameter. It specifies the element which is to search and return the index value with respect to the selector.
- Return value – The return value of this function is the index value of the specified element.
Working of the jQuery index() Function
The JQuery index() function accepts one parameter, the parameter is the element that is to search in the matched elements. Suppose we have an element used on the page next we need to find the index of a specific element like “div”. So we can use the index() function as “$( “div” ).index( );”, which will return a number that indicates the index of “div” element in the page.
Examples
Example of jQuery index() function to get the index value of the specific element –
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 index( ) function </title>
<script>
$(document).ready(function() {
$("li").click(function() {
$("li").css( {"color": "black"} );
$(this).css( {"color" : "red"} );
$( "#p1" ).text("The $(\"li\").index() is : " + $(this).index());
});
});
</script>
</head>
<body>
<h3> This an example of index() function: </h3>
<div> Click the below list of elements to get their index value among their list. </div>
<h2> The List of Vegetables are : </h2>
<ol>
<li> Corn </li>
<li> Mushroom </li>
<li> Broccoli </li>
<li> Cucumber </li>
</ol>
<h2> The List of Fruits are : </h2>
<ol>
<li> Apple </li>
<li> Banana </li>
<li> Cherry </li>
<li> Pome </li>
</ol>
<p id = "p1"> </p>
</body>
</html>An output of the above code is –
Once we click on the list of elements, the respective outputs are –
In the above code, there are two order lists created for the vegetables and fruits. Next, the index() function is used to get the index of selected or clicked list elements as “$( this ).index();”. Note that both the lists are different, so the element gives the index value with respect to its list, as we can see in the above output.
Example of jQuery array indexOf() function to get the index of the elements from the selector with passing parameter value for the search –
Example #2
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 index( ) function </title>
<script>
$(document).ready(function() {
$("p").click(function() {
$("p").css( {"color" : "black", "border" : "0px solid black"} );
$(this).css( {"color" : "red", "border" : "2px solid black"} );
alert("The $(\"p\").index( \"p\" ) is : " + $(this).index("p")+ "\nThe $(\".c1\").index( \"p\" ) is : " + $(".c1").index("p"));
});
$("span").click(function() {
$("span").css( {"color" : "black", "border" : "0px solid black"} );
$(this).css( {"color" : "red", "border" : "2px solid black"} );
alert("The $(\"span\").index( \"span\" ) is : " + $(this).index("span")+ "\nThe $(\".c1\").index( \"span\" ) is : " + $(".c1").index("span"));
});
});
</script>
</head>
<body>
<h3> This an example of index() function: </h3>
<p> This is a first paragraph without any class. </p>
<span class = "c1" > This is a first span box with class "c1". </span>
<p class = "c1" > This is a second paragraph with class "c1". </p>
<span class = "c1" > This is a second span box with class "c1". </span>
<br>
</body>
</html>An output of the above code is –
Once we click on the first p element, the output is –
Once we click on the first span element, the output is –
Once we click on the second p element, the output is –
Once we click on the second span element, the output is –
In the above code, the “h3” “p” and “span” elements are used, “p” and “span” used with the class as well. Next, the index() function is used to get the index of selected or clicked elements with and without class. The code “$( “.c1” ).index( “span”);” selects the elements who have class “c1” and among these select “span” element index in the selected list. We can see in the above output the result for a different combination.
Example of jQuery array indexOf() function to get the index of the multiple elements –
Example #3
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 index( ) function </title>
<script>
$(document).ready(function() {
$("button").click(function() {
alert("$(\"p\").index() : " +$("p").index() + "\n$(\"p, h3\").index() : " +$("p, h3").index() + "\n$(\"h3, p\").index() : " +$("h3, p").index());
});
});
</script>
</head>
<body>
<h3> This an example of index() function: </h3>
<p> This is paragraph. </p>
<span > This is a span box. </span>
<br>
<br>
<button> Get the index of an element </button>
</body>
</html>An output of the above code is –
In the above code, the “h3” “p” and “span” elements are used. Next, the index() function is used to get the index of “p” which returned 1, then used to get the index of “p” and “h3” in one call which returned the index of “h3” that is the lowest index and also try third time alternatively, there also return the “h3” index that is the lowest index. So among the multiple selectors, it gives the lowest index, as we can see in the above output.
Conclusion
The jQuery index() function is a built-in function, which is used to returns the index of the specific element with respect to the selector.
Recommended Articles
This is a guide to jQuery index. Here we discuss the description, syntax, parameters, working of the JQuery index() function, and examples with code implementation respectively. You may also have a look at the following articles to learn more –
