如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
第一个匹配元素的 index,相对于同胞元素
获得第一个匹配元素相对于其同胞元素的 index 位置。
语法
$(selector).index()
试一下
代码如下 | 复制代码 |
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").click(function(){ alert($(this).index()); }); }); </script> </head> <body> <p>点击列表项可获得其相对于同胞元素的 index 位置:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Soda</li> </ul> </body> </html> |
例
代码如下 | 复制代码 |
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul> $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置 //用于二级或者三级联动 $("#nav a").click(function(){ |
应用例子
思路:
页面部分当为当前状态的时候,会添加“active”样式。
通过获取 li class="active" 的索引值,对应找到相应的图片说明信息,显示出来。
解决:
通过jquery的 index() 可以很轻松的实现该效果。
代码如下 | 复制代码 |
<div id="carousel"> <div id="carouselimg"> <div id="imgcontainer"> <a href="#" mce_href="#"><img src="" /></a> <a href="#" mce_href="#"><img src="" /></a> <a href="#" mce_href="#"><img src="" /></a> <a href="#" mce_href="#"><img src="" /></a> <a href="#" mce_href="#"><img src="" /></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> |