本文實例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。
索引值是從0開始的。
語法結(jié)構(gòu)一:
當(dāng)此方法沒有參數(shù)的時候，返回值是指定元素在其同輩元素集合中的索引位置。
$(selector).index()
實例代碼:
實例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>index()函數(shù)-武林網(wǎng)</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>武林網(wǎng)</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元素集合中的索引值。
實例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>index()函數(shù)-武林網(wǎng)</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>武林網(wǎng)</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。
$(selector).index(element)
參數(shù)列表:
| 參數(shù) | 描述 |
| element | 獲得index位置的DOM對象或者jQuery對象。 |
實例代碼:
實例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>index()函數(shù)-武林網(wǎng)</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>武林網(wǎng)</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.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>index()函數(shù)-武林網(wǎng)</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>武林網(wǎng)</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ù)為選擇器時，將會從通過此選擇器獲得的對象集合中查找元素。
$(selector).index(Jqselector)
參數(shù)列表:
| 參數(shù) | 描述 |
| Jqselector | 選擇器，將會從通過此選擇器獲得的對象中查找元素。 |
實例代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.survivalescaperooms.com/" />
<title>index()函數(shù)-武林網(wǎng)</title>
<style type="text/css">
span{
color:red;
}
</style>
<title>武林網(wǎng)</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è)計有所幫助。
