本文實例講述了jQuery中index()方法用法。分享給大家供大家參考。具體分析如下：
此方法可以搜索匹配元素，并返回元素的索引值。
索引值是從0開始的。
語法結構一:
當此方法沒有參數的時候，返回值是指定元素在其同輩元素集合中的索引位置。
$(selector).index()
實例代碼:
實例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.49028c.com/" />
<title>index()函數-武林網</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>后臺專區</li>
<li class="qian">前臺專區</li>
<li>數據庫專區</li>
<li>站長交流</li>
</ul>
</div>
<div>當前li元素的位置:<span>0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>
上面代碼能夠返回類名為qian的li元素在其同輩元素集合中的索引值，看到這里大家可能有這樣的疑問，所謂同輩元素是否是同類元素，也就是說li元素在li元素集合中的索引值。
實例二:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.49028c.com/" />
<title>index()函數-武林網</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>后臺專區</li>
<li id="qian">前臺專區</li>
<li>數據庫專區</li>
<li>站長交流</li>
<span id="sou">搜索優化</span>
</ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>
由以上的代碼可以看出，并非只是同類元素，而是所有的同輩元素。
語法結構二:
當方法的參數為DOM對象或者jQuery對象時，返回值是此DOM對象或者jQuery對象在指定的元素集合中索引。
如果在指定的元素集合中找不到指定的DOM對象或者jQuery對象，那么返回值為-1。
$(selector).index(element)
參數列表:
| 參數 | 描述 |
| element | 獲得index位置的DOM對象或者jQuery對象。 |
實例代碼:
實例一:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.49028c.com/" />
<title>index()函數-武林網</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>后臺專區</li>
<li id="qian">前臺專區</li>
<li>數據庫專區</li>
<li>站長交流</li>
</ul>
</div>
<div>當前li元素的位置:<span>0</span></div>
<button id="btn">點擊查看結果</button>
</body>
</html>
實例二:
因為找不到匹配的元素，所以返回值是-1.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.49028c.com/" />
<title>index()函數-武林網</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>后臺專區</li>
<li id="qian">前臺專區</li>
<li>數據庫專區</li>
<li>站長交流</li>
<span id="sou">搜索優化</span>
</ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
語法結構三:
當方法的參數為選擇器時，將會從通過此選擇器獲得的對象集合中查找元素。
$(selector).index(Jqselector)
參數列表:
| 參數 | 描述 |
| Jqselector | 選擇器，將會從通過此選擇器獲得的對象中查找元素。 |
實例代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.49028c.com/" />
<title>index()函數-武林網</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>后臺專區</li>
<li id="qian">前臺專區</li>
<li>數據庫專區</li>
<li>站長交流</li>
<span id="sou">搜索優化</span>
</ul>
</div>
<div>當前li元素的位置:<span class="index">0</span></div>
<button id="btn">點擊查看實例</button>
</body>
</html>
上述代碼會取得id值為qian的li元素在通過li選擇器獲得li對象集合中的索引位置。
希望本文所述對大家的jQuery程序設計有所幫助。
