jQuery中index()方法用法實例
更新時間：2014年12月27日 12:34:28 投稿：shichen2014
這篇文章主要介紹了jQuery中index()方法用法,實例分析了index()方法返回索引值的幾種常見使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。
索引值是從0開始的。
語法結(jié)構(gòu)一:
當(dāng)此方法沒有參數(shù)的時候，返回值是指定元素在其同輩元素集合中的索引位置。
復(fù)制代碼 代碼如下:
$(selector).index()
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($(".qian").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li class="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span>0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
上面代碼能夠返回類名為qian的li元素在其同輩元素集合中的索引值，看到這里大家可能有這樣的疑問，所謂同輩元素是否是同類元素，也就是說li元素在li元素集合中的索引值。
實例二:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#sou").index());
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
由以上的代碼可以看出，并非只是同類元素，而是所有的同輩元素。
語法結(jié)構(gòu)二:
當(dāng)方法的參數(shù)為DOM對象或者jQuery對象時，返回值是此DOM對象或者jQuery對象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM對象或者jQuery對象，那么返回值為-1。
復(fù)制代碼 代碼如下:
$(selector).index(element)
參數(shù)列表:
實例代碼:
實例一:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("span").text($("li").index(document.getElementById("qian")));
})
})
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span>0</span></div>
<button id="btn">點擊查看結(jié)果</button>
</body>
</html>
實例二:
因為找不到匹配的元素，所以返回值是-1.
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("li").index(document.getElementById("sou")));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
語法結(jié)構(gòu)三:
當(dāng)方法的參數(shù)為選擇器時，將會從通過此選擇器獲得的對象集合中查找元素。
復(fù)制代碼 代碼如下:
$(selector).index(Jqselector)
參數(shù)列表:
實例代碼:
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>index()函數(shù)-腳本之家</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>腳本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$(".index").text($("#qian").index("li"));
})
});
</script>
</head>
<body>
<div>
<ul>
<li>后臺專區(qū)</li>
<li id="qian">前臺專區(qū)</li>
<li>數(shù)據(jù)庫專區(qū)</li>
<li>站長交流</li>
<span id="sou">搜索優(yōu)化</span>
</ul>
</div>
<div>當(dāng)前l(fā)i元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
上述代碼會取得id值為qian的li元素在通過li選擇器獲得li對象集合中的索引位置。
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
本篇文章主要是對jquery的js圖表組件highcharts進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
本文主要是講解和學(xué)習(xí)jQuery的自動顯隱，漸入漸出、飛入飛出、自定義動畫等。非常詳細(xì)，這里推薦給有需要的小伙伴。2015-02-02
jQuery動畫效果animate和scrollTop結(jié)合使用實例
animate是jq的一個特效的函數(shù)方法，animate() 方法執(zhí)行 CSS 屬性集的自定義動畫。該方法通過CSS樣式將元素從一個狀態(tài)改變?yōu)榱硪粋€狀態(tài)。2014-04-04
本文通過實例代碼給大家分享了基于jQuery Easyui實現(xiàn)登陸框界面，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07
我們通常在執(zhí)行一次ajax請求過后，需要更新界面上的某些內(nèi)容，一般通過動態(tài)插入dom元素。2010-10-10
3種不同的ContextMenu右鍵菜單實現(xiàn)代碼
本文給大家分享3種不同的ContextMenu右鍵菜單實現(xiàn)代碼的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了一個實用的圖片切換支持點擊切換和自動輪播，經(jīng)測試效果相當(dāng)不錯，需要的朋友可以參考下2014-09-09
jQuery 對Select的操作備忘記錄，整理的比較全，并且附有詳細(xì)的說明。2011-07-07
jQuery是繼prototype之后又一個優(yōu)秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情。2009-10-10
這篇文章主要介紹了jQuery中Find選擇器用法,簡單介紹了find選擇器的功能,并結(jié)合實例分析了find選擇器的具體使用方法,需要的朋友可以參考下2016-09-09