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