【原创】浅说下jquery中的index()

1，index()方法是啥？

jquery获取元素索引值index()方法：
jquery的index()方法 搜索匹配的元素，并返回相应元素的索引值，从0开始计数。 

1. 若是不给 .index() 方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 
2. 若是参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 
3. 若是参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。若是找不到匹配的元素，则返回-1。 

 

2，页面元素

<ul id="demo">
			<li id="pj">汽车配件</li>
			<li id="lt">汽车轮胎</li>
			<li id="yq">汽车油漆</li>
			<li id="lj">汽车零件</li>
			<li id="wg">汽车外观</li>
</ul>

 

3，基本用法

var this_li = $("li").index($("#lt"));   //index后跟对象       //index("#lt");错误写法
alert(this_li)       //返回1

var this_li2 = $("#lt").index("li");    //跟上面的写法相反      
alert(this_li2)     //返回1

var this_li3 = $("#haha").index();       //不传参数，此元素不存在 
alert(this_li3)     //返回-1

var this_li4 = $("#lt").index();       //不传参数，返回这个元素在同辈中的索引位置。 
alert(this_li4)     //返回1

 

4，获取点击项的索引号

$("#demo li").click(function(){
  	var this_li5 = $("li").index($(this));      // 等同于   var this_li4 = $("li").index(this);
  	alert(this_li5)
})

/*
顺带说下：
$(this) 和 this 的区别

this 是 JavaScript 中的关键字。
this,则是html元素对象，能调用元素属性，例如this.id,this.value

$(this) 能够认为是用 jQuery 包装过 JavaScript 中的 this，包装后 $(this) 就会继承 jQuery 的方法。
$(this)是jquery对象，能调用jquery的方法，例如click(), keyup()。
*/

 

5，经典案例

//tab选项卡
$(function(){ 
    var hq_li=$("#menu ul li");
    hq_li.click(function(){ 
  	
  	$(this).addClass("selected").siblings().removeClass("selected");

    var index = hq_li.index(this);  //获取当前索引号
    $("#tab_box > div").eq(index).show().siblings().hide(); })  //索引号的div显示，其余隐藏

})

完整tab实例请移步到：http://www.javashuo.com/article/p-riiembfi-hq.html