This example describes the use of the index () method in jquery. Share to everyone for your reference. The specific analysis is as follows:
This method can search for a matching element and return the index value of the element.
The index value starts at 0.
Grammatical structure One:
When this method has no arguments, the return value is the index position of the specified element in the collection of its sibling elements.
Copy Code code as follows:
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>index () function-cloud-dwelling community </title>
<style type= "Text/css" >
span{
color:red;
}
</style>
<title> Cloud-dwelling community </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>
<body>
<div>
<ul>
<li> Backstage </li>
<li class= "Qian" > Front zone </li>
<li> Database Zone </li>
<li> Webmaster Communication </li>
</ul>
</div>
<div> position of current LI element:<span>0</span></div>
<button id= "BTN" > Click to view Results </button>
</body>
The code above can return the indexed value of an LI element with a class name of Qian in its set of sibling elements, and see here you may have the question of whether a peer element is a similar element, i.e. the index value of the LI element in the LI element collection.
Example two:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>index () function-cloud-dwelling community </title>
<style type= "Text/css" >
span{
color:red;
}
</style>
<title> Cloud-dwelling community </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>
<body>
<div>
<ul>
<li> Backstage </li>
<li id= "Qian" > Front zone </li>
<li> Database Zone </li>
<li> Webmaster Communication </li>
<span id= "sou" > Search optimization </span>
</ul>
</div>
<div> position of current LI element: <span class= "index" >0</span></div>
<button id= "BTN" > Click to view Results </button>
</body>
As you can see from the above code, not just the same kind of elements, but all sibling elements.
Grammatical structure two:
When the parameter of a method is a DOM object or a jquery object, the return value is that this 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.
Copy Code code as follows:
$ (selector). Index (Element)
Parameter list:
| Parameters |
Describe |
| Element |
that gets the index position. A DOM object or a jquery object. |
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>index () function-cloud-dwelling community </title>
<style type= "Text/css" >
span{
color:red;
}
</style>
<title> Cloud-dwelling community </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>
<body>
<div>
<ul>
<li> Backstage </li>
<li id= "Qian" > Front zone </li>
<li> Database Zone </li>
<li> Webmaster Communication </li>
</ul>
</div>
<div> position of current LI element:<span>0</span></div>
<button id= "BTN" > Click to view Results </button>
</body>
Example two:
Because no matching element was found, the return value is-1.
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>index () function-cloud-dwelling community </title>
<style type= "Text/css" >
span{
color:red;
}
</style>
<title> Cloud-dwelling community </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>
<body>
<div>
<ul>
<li> Backstage </li>
<li id= "Qian" > Front zone </li>
<li> Database Zone </li>
<li> Webmaster Communication </li>
<span id= "sou" > Search optimization </span>
</ul>
</div>
<div> position of current LI element: <span class= "index" >0</span></div>
<button id= "BTN" > Click to view instance </button>
</body>
Grammatical structure three:
When the parameter of the method is a selector, the element is found in the collection of objects that are obtained from this selector.
Copy Code code as follows:
$ (selector). Index (Jqselector)
Parameter list:
| Parameters |
Describe |
| Jqselector |
Selector, the element will be found from the object that is obtained from this selector. |
Instance code:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<meta name= "Author" content= "http://www.jb51.net/"/>
<title>index () function-cloud-dwelling community </title>
<style type= "Text/css" >
span{
color:red;
}
</style>
<title> Cloud-dwelling community </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>
<body>
<div>
<ul>
<li> Backstage </li>
<li id= "Qian" > Front zone </li>
<li> Database Zone </li>
<li> Webmaster Communication </li>
<span id= "sou" > Search optimization </span>
</ul>
</div>
<div> position of current LI element: <span class= "index" >0</span></div>
<button id= "BTN" > Click to view instance </button>
</body>
The above code obtains an index position in the collection of Li objects through the Li selector of the LI element with the ID value of Qian.
I hope this article will help you with your jquery programming.
