Tutorialspoint.dev

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


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter