jQuery | index() with examples - GeeksforGeeks

13 Feb, 2019
The index() is an inbuilt method in jQuery which is used to return the index of the a specified elements with respect to selector.Syntax:
$(selector).index(element)

Parameter: It accepts an optional parameter “element” which is used to get the position of the element.Return value: It returns an integer denoting the index of the specified element.
<!DOCTYPE html><html>  <head>    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script>        <!--jQuery code to demonstrate index function -->          // document ready        $(document).ready(function() {            // if the list is clicked            $("li").click(function() {                // index()                 // to return the index of the clicked                // element of the list                document.getElementById("demo").innerHTML = "Clicked Index "                                                            + $(this).index();            });        });    </script></head>  <body>      <p>Click on the elements of the list to display their index       number with respect to the other elements in the list.</p>      <ul>        <li>Geeks</li>        <li>for</li>        <li>Geeks</li>    </ul>      <p id="demo"></p></body>  </html>
Output:Before clicking on any element on the list
Click on the elements of the list to display their index number with 
respect to the other elements in the list.
GeeksforGeeks
Click on the elements of the list to display their index number with 
respect to the other elements in the list.

Geeks
for
Geeks
After clicking on “for”-
Click on the elements of the list to display their index number with 
respect with the other elements in the list.
GeeksforGeeks
Clicked Index 1

Click on the elements of the list to display their index number with 
respect with the other elements in the list.

Geeks
for
Geeks
Code #2:
<!DOCTYPE html><html>  <head>    <script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script>        <!--jQuery code to demonstrate index function -->          // document ready        $(document).ready(function() {            // if the list is clicked            $("li").click(function() {                // index()                 // to return the index of the clicked                // element of the list                document.getElementById("demo").innerHTML = "Clicked Index "                                    + $($(".myclass")).index($("#id"));            });        });    </script></head>  <body>      <p>Click on the elements of the list to display their index       number with respect with the other elements in the list.</p>      <ul>        <li>Geeks</li>        <li class="myclass">for</li>        <li class="myclass" id="id">Geeks</li>    </ul>      <p id="demo"></p></body>  </html>
Output:Before clicking on any element on the list-
Click on the elements of the list to display their index number with 
respect with the other elements in the list.
GeeksforGeeks

Click on the elements of the list to display their index number with 
respect with the other elements in the list.

Geeks
for
Geeks
After clicking on any element of the list-
Click on the elements of the list to display their index number with 
respect with the other elements in the list.
GeeksforGeeks
Clicked Index 1

Click on the elements of the list to display their index number with 
respect with the other elements in the list.

Geeks
for
Geeks
jQuery-Misc
JavaScript
JQuery
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to get character array from string in JavaScript?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?