Example of index of method usage in jQuery
- 2020-05-09 18:11:54
- OfStack
This article illustrates the use of the index() method in jQuery as an example. Share with you for your reference. The specific analysis is as follows:
This method searches for the matching element and returns the index value of the element.
The index value starts at 0.
Grammatical structure 1:
When this method has no arguments, the return value is the index position of the specified element in the collection of its peers.
$(selector).index()Example code:
Example 1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>index() function - The home of the script </title>
<style type="text/css">
span{
color:red;
}
</style>
<title> The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($(".qian").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li> The background section </li>
<li class="qian"> Zone at the front desk </li>
<li> Database zone </li>
<li> Master communication </li>
</ul>
</div>
<div> The current li Position of element :<span>0</span></div>
<button id="btn"> Click to view the results </button>
</body>
</html>
The code above returns the index value of the li element of class qian in the set of its peer elements. As you can see here, you may have the question whether the peer element is a homogeneous element, that is, the index value of the li element in the set of li elements.
Example 2:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>index() function - The home of the script </title>
<style type="text/css">
span{
color:red;
}
</style>
<title> The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#sou").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li> The background section </li>
<li id="qian"> Zone at the front desk </li>
<li> Database zone </li>
<li> Master communication </li>
<span id="sou"> Search optimization </span>
</ul>
</div>
<div> The current li Position of element :<span class="index">0</span></div>
<button id="btn"> Click to view the results </button>
</body>
</html>
As you can see from the code above, it's not just elements of the same class, but all elements of the same class.
Grammatical structure 2:
When the method takes an DOM object or jQuery object as its argument, the return value is that the DOM object or jQuery object is indexed in the specified collection of elements.
If the specified DOM object or jQuery object is not found in the specified collection of elements, the return value is -1.
$(selector).index(element)
Parameter list:
Example code:
Example 1:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>index() function - The home of the script </title>
<style type="text/css">
span{
color:red;
}
</style>
<title> The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($("li").index(document.getElementById("qian")));
})
})
</script>
</head>
<body>
<div>
<ul>
<li> The background section </li>
<li id="qian"> Zone at the front desk </li>
<li> Database zone </li>
<li> Master communication </li>
</ul>
</div>
<div> The current li Position of element :<span>0</span></div>
<button id="btn"> Click to view the results </button>
</body>
</html>
Example 2:
Because no matching element was found, the return value is -1.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>index() function - The home of the script </title>
<style type="text/css">
span{
color:red;
}
</style>
<title> The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("li").index(document.getElementById("sou")));
})
});
</script>
</head>
<body>
<div>
<ul>
<li> The background section </li>
<li id="qian"> Zone at the front desk </li>
<li> Database zone </li>
<li> Master communication </li>
<span id="sou"> Search optimization </span>
</ul>
</div>
<div> The current li Position of element :<span class="index">0</span></div>
<button id="btn"> Click to view an example </button>
</body>
</html>
Grammatical structure 3:
When the argument to a method is a selector, the element is looked up from the collection of objects obtained through this selector.
$(selector).index(Jqselector)
Parameter list:
Example code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="//www.ofstack.com/" />
<title>index() function - The home of the script </title>
<style type="text/css">
span{
color:red;
}
</style>
<title> The home of the script </title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#qian").index("li"));
})
});
</script>
</head>
<body>
<div>
<ul>
<li> The background section </li>
<li id="qian"> Zone at the front desk </li>
<li> Database zone </li>
<li> Master communication </li>
<span id="sou"> Search optimization </span>
</ul>
</div>
<div> The current li Position of element :<span class="index">0</span></div>
<button id="btn"> Click to view an example </button>
</body>
</html>
The code above gets the index position of the li element with id value qian in the li object collection obtained through the li selector.
I hope this article has been helpful to your jQuery programming.