jQuery | index() with examples

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.

jQuery code to show the working of index() function:

Code #1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script 
    </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>

chevron_right


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.

  • 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.

  • Geeks
  • for
  • Geeks
Clicked Index 1

Code #2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script 
    </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>

chevron_right


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.

  • 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.

  • Geeks
  • for
  • Geeks
Clicked Index 1


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.