jQuery | index() with examples
Last Updated :
13 Feb, 2019
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>
// 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.
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.
Clicked Index 1
Code #2:
<!DOCTYPE html>
<html>
<head>
<script
</script>
<script>
// 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.
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.
Clicked Index 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...