jQuery | index() with examples

0 0 1 minute read

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

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