If the parameter is a set of DOM elements or jquery objects, the return value is the position of the passed element relative to the original collection.
If the parameter is a selector, then the return value is the position of the original element relative to the selector matching element. Returns-1 if no matching element is found.
Index of the first matching element, relative to the sibling element
Gets the index position of the first matching element relative to its sibling element.
Grammar
$ (selector). Index ()
Try
| The code is as follows |
Copy Code |
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("Li"). Click (function () {
Alert ($ (this). index ());
});
});
</script>
<body>
<p> Click the list item to get its index position relative to the sibling element:</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
|
Cases
| The code is as follows |
Copy Code |
| <ul>
<li id= "foo" >foo</li>
<li id= "Bar" >bar</li>
<li id= "Baz" >baz</li>
</ul> $ (' li '). Index (document.getElementById (' Bar ')); 1, passing a DOM object that returns the index position of the object in the original collection
$ (' li '). Index ($ (' #bar ')); 1, passing a jquery object
$ (' li '). Index ($ (' li:gt (0) ')); 1, passing a set of jquery objects that returns the index position of the first element of the object in the original collection
$ (' #bar '). Index (' Li '); 1, pass a selector, return #bar position in all Li
$ (' #bar '). index (); 1, does not pass the parameter, returns the index position of this element in the sibling. jquery get element index value () example
For two-or three-level linkage
<div id= "NAV" >
<a href= "http://www.111cn.net/" > Construction Station material </a>
<a href= "http://www.111cn.net/" >jquery special effects </a>
<a href= "http://www.111cn.net/" > Script Academy </a>
<a href= "http://www.111cn.net/school/" > website Programming </a>
</div>
$ ("#nav a"). Click (function () {
Four classic usage
var index1 = $ ("#nav a"). Index (this);
var index2 = $ ("#nav a"). Index ($ (this));
var index3 = $ (this). Index ()
var index3 = $ (this). Index ("a")
alert (INDEX3);
return false;
}); |
Application examples
Ideas:
When the page section is in the current state, the active style is added.
By obtaining the index value of Li class= "active", the corresponding picture description information is found, which is displayed.
Solve:
The result can be easily achieved by using the index () of jquery.
| The code is as follows |
Copy Code |
| <div id= "Carousel" >
<div id= "Carouselimg" >
<div id= "Imgcontainer" >
<a href= "#" mce_href= "#" ></a>
<a href= "#" mce_href= "#" ></a>
<a href= "#" mce_href= "#" ></a>
<a href= "#" mce_href= "#" ></a>
<a href= "#" mce_href= "#" ></a>
</div>
</div>
<div id= "Carouseltitle" >
<div class= "Carouseltext" >
<span> </span>
<span> </span>
<span> </span>
<span> </span>
<span> </span>
</div>
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
</div>
</div> Jquery <script src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src= "http:// Ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></SCRIPT>
<script type=text/javascript>
var carousedata = [
{index:0,link: "Http://www.111cn.net", Imgsrc: "1.jpg", Text: "Thousands of famous mobile phone 60 percent"},
{index:1,link: "http://www.baidu.com", Imgsrc: "2.jpg", Text: "Test text 2"},
{index:2,link: "Http://www.111cn.net", Imgsrc: "3.jpg", Text: "Test text 3"},
{index:3,link: "http://www.soso.com", Imgsrc: "Xf.jpg", Text: "Test text 4"},
{index:4,link: "Http://www.111cn.net", Imgsrc: "Py.jpg", Text: "Test text 5"}
];
$ (document). Ready (function () {
$ ("#imgcontainer a"). each (function (i) {
$ (this). attr ("href", carousedata[i].link);
$ (this). Children ("img"). attr ("src", carousedata[i].imgsrc);
});
$ (". Carouseltext span"). each (function (i) {
$ (this). Text (Carousedata[i].text);
})
SetInterval (function () {
var Li_index = $ ("#carouseltitle ul li"). Index ($ ("#carouseltitle ul li.active") [0]);
$ (". Carouseltext span"). Hide ();
$ (". Carouseltext span"). EQ (Li_index). Show ();
},10);
});
</script> |
