【原創】淺說下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