You are here
jquery获取元素索引值 位置 序号 有大用 有大大用
今天在使用jQuery的时候，想要知道<ul>下的一堆<li>中，自己点击的<li>的索引值是什么，在网上查了下，原文如下：
至少 在 jquery.1.9.1 肯定有用
下面这个有大用 肯定有用
1 $("li").hover(function(){
2 alert($(this).index()); //OK 肯定有大用
或者: $(this).index($(this).parent().parent()[0]) //好像不行
3 });
jquery判断元素在父级元素的下标
$("#box1Float a").click(function(){
var index1 = $("#box1Float a").index(this); //OK
});
下面自己亲自做的 肯定有大用
<div class="content">
<a href="#">我是第一个a标签</a> <a href="#">我是第二个a标签</a> <a href="#">我是第三个a标签</a> <a href="#">我是第四个a标签</a> </div>
$(function(){ $(".content a").click(function() {
$(this).addClass('selected');
// 给被点击元素添加样式 alert($(this).index());
}) })
jquery获取当前元素在同辈元素中的索引号实例
如何通过 jquery 获取当前元素在同辈元素中的索引号，下面通过一个例子来说明：
<ul class="img">
<li><a href="#"><img src="style/img/ad1.jpg"/></a></li>
<li><a href="#"><img src="style/img/ad2.jpg"/></a></li>
<li><a href="#"><img src="style/img/ad3.jpg"/></a></li>
<li><a href="#"><img src="style/img/ad4.jpg"/></a></li>
<li><a href="#"><img src="style/img/ad5.jpg"/></a></li>
</ul>
假如我给每一个img元素绑定一个click事件，那么在click的function中如何能知道我当前单击的是哪一个img呢？即怎么知道它的 index号呢？(比如单击ad1.jpg，应该返回0,ad2.jpg应该返回1，或者前面返回1和2),则如下：
第一种方法
$('.img img').bind('click',function(){
alert($('.img img').index(this));
});
另外你也可以直接使用：
第二种方法
$(this).index(); // 这个取得this 在 父元素中的索引位置,肯定有大用,
这种方法获取索引号，经过测试，第二种方法更为简练，而且获取的索引号是相对于当前父元素的，而不是像第一种方法是相对于整个body元素的。
来自 http://www.daimajiayuan.com/sitejs-17121-1.html
下面好像有点问题
Apr272012
jquery获取元素索引值
jquery中如何获取某一个元素，在一组元素中的索引值呢，jquery提供了index方法来获取元素的索引值。
如果没有找到匹配的元素,则返回 -1 有时得到 -1 是由于，这还跟jquery版本有关系，我用的jquery-1.3.1.js这个版本，换了一个就好了。坑爹呢这是。。。多谢了！
index的具体用法如下：
[JS]
//第一个参数是子元素 第二个参数是父元素
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
[HTML]
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
总的来说，分两种用法，
1，先选集合，再选特定元素，求索引
2，先选元素，再求其在特定集合里的索引。
第1种情况下，你可以传递DOM元素、jQuery对象进去
第2种情况下，你只能传递选择器进去了，注意，是选择器，既不是DOM，也不是jQuery对象！
至于那个为空的，就忽视它吧
index()实现tab效果实例
[JS]
$(function(){
var $title = $("h3 a");
var $content = $("div"); //这个数组定义很有用，省去了原始js里的循环做法
$title.mousemove(function(){
var index = $title.index($(this)); //index指向当前
$content.hide(); //直接对数组进行隐藏操作
$($content.get(index)).show();
return false;
});
});
[HTML]
<h3>
<a href="#">选择1</a>
<a href="#" >选择2</a>
<a href="#">选择3</a>
<a href="#" >选择4</a>
</h3>
<div>选择1的内容</div>
<div>选择2的内容</div>
<div>选择3的内容</div>
<div>选择4的内容</div>
这里介绍的是获取元素索引值，那么如何根据索引获取元素呢
来自 http://www.webzhishi.com/jquery-index/
jquery获取元素索引值index()方法：
jquery的index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。
如果不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的做引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
jquery获取元素索引值index()示例
//用于二级或者三级联动
<div id="nav">
<a href="http://www.51xuediannao.com/">建站素材</a>
<a href="http://www.51xuediannao.com/">jquery特效</a>
<a href="http://www.51xuediannao.com/">懒人主机</a>
<a href="http://www.51xuediannao.com/qd63/">前端路上</a>
</div>
$("#nav a").click(function(){
//四个经典的用法
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;
});