Thursday, September 25, 2025
HomeLanguagesJavascriptjQuery | index() with examples

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:




<!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>


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:




<!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>


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

RELATED ARTICLES

Most Popular

Dominic
32319 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6682 POSTS0 COMMENTS
Nicole Veronica
11854 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11910 POSTS0 COMMENTS
Shaida Kate Naidoo
6794 POSTS0 COMMENTS
Ted Musemwa
7070 POSTS0 COMMENTS
Thapelo Manthata
6753 POSTS0 COMMENTS
Umr Jansen
6761 POSTS0 COMMENTS