.index()
.index( ) 返回: Number
描述： 從匹配的元素中搜索給定元素的索引值，從0開始計(jì)數(shù)。
version added: 1.4.index()
-
version added: 1.4.index( selector )
selector一個(gè)選擇器，代表一個(gè)jQuery對(duì)象，將會(huì)從這個(gè)對(duì)象中查找元素。
-
version added: 1.0.index( element )
element將要用于查找的DOM元素，或者jQuery對(duì)象中的第一個(gè)元素。
返回值
如果不傳遞任何參數(shù)給 .index() 方法，則返回值就是jQuery對(duì)象中第一個(gè)元素相對(duì)于它同輩元素的位置。
如果在一組元素上調(diào)用 .index() ，并且參數(shù)是一個(gè)DOM元素或jQuery對(duì)象， .index() 返回值就是傳入的元素相對(duì)于原先集合的位置。
如果參數(shù)是一個(gè)選擇器， .index() 返回值就是原先元素相對(duì)于選擇器匹配元素的位置。如果找不到匹配的元素，則 .index() 返回 -1.
細(xì)節(jié)
.get() 接受一個(gè)索引值參數(shù)并返回對(duì)應(yīng)的DOM節(jié)點(diǎn)， .index() 與其正好相反，接受一個(gè)DOM節(jié)點(diǎn)然后返回其索引值。假設(shè)頁(yè)面上有個(gè)簡(jiǎn)單的無序列表：
<ul> <li id="foo">foo</li> <li id="bar">bar</li> <li id="baz">baz</li> </ul>
如果我們獲取了三個(gè)li中的一個(gè)元素（例如通過DOM函數(shù)，或者事件處理函數(shù)中的上下文this）， .index() 能夠在匹配的元素中找到這個(gè)列表項(xiàng)：
var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
我們就能得到這個(gè)li所在的位置，從0開始計(jì)數(shù)的：
Index: 1
類似的，如果我們獲得了含有這三個(gè)之中一個(gè)元素的jQuery對(duì)象， .index() 也能用于搜索那個(gè)列表項(xiàng)：
var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));
我們就能得到這個(gè)li所在的位置，從0開始計(jì)數(shù)的：
Index: 1
注意，如果作為 .index() 參數(shù)使用的jQuery集合含有多個(gè)元素，則只會(huì)使用第一個(gè)：
var listItems = $('li:gt(0)');
alert('Index: ' + $('li').index(listItems));
我們得到了匹配的li集合中，第一個(gè)元素的位置，從0開始計(jì)數(shù)。
Index: 1
如果我們將一個(gè)字符串傳遞給 .index() 方法，這個(gè)字符串會(huì)被解析成jQuery選擇器，將會(huì)定位到調(diào)用 .index() 的jQuery對(duì)象中第一個(gè)元素，相對(duì)于由這個(gè)選擇器匹配到的元素集合中的位置：
var listItem = $('#bar');
alert('Index: ' + listItem.index('li'));
我們就能得到這個(gè)列表項(xiàng)li#bar所在的位置，從0開始計(jì)數(shù)的：
Index: 1
如果我們忽略參數(shù)， .index() 將返回集合中第一個(gè)元素相對(duì)于其同輩元素的位置：
alert('Index: ' + $('#bar').index();
又一次，我們得到了這個(gè)li從0開始數(shù)的位置。
Index: 1
Examples:
Example: 點(diǎn)擊后，返回那個(gè)div在頁(yè)面上的索引值(從0開始計(jì)數(shù))。
<!DOCTYPE html>
<html>
<head>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
<script>
$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});
</script>
</body>
</html>Demo:
Example: 返回ID為bar的元素的索引值。
<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>var listItem = $('#bar');
$('div').html( 'Index: ' + $('li').index(listItem) );</script>
</body>
</html>Demo:
Example: 返回jQuery集合中第一項(xiàng)的索引值。
<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>var listItems = $('li:gt(0)');
$('div').html( 'Index: ' + $('li').index(listItems) );
</script>
</body>
</html>Demo:
Example: 返回ID為bar的元素相對(duì)于所有 <li> 元素的索引值。
<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>$('div').html('Index: ' + $('#bar').index('li') );</script>
</body>
</html>Demo:
Example: 返回ID為bar的元素相對(duì)于同輩的索引值。
<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>var barIndex = $('#bar').index();
$('div').html( 'Index: ' + barIndex );</script>
</body>
</html>Demo:
Example: 由于沒有元素的ID為foobar，所以返回 -1。
<!DOCTYPE html>
<html>
<head>
<style>div { font-weight: bold; color: #090; }</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
<div></div>
<script>var foobar = $("li").index( $('#foobar') );
$('div').html('Index: ' + foobar);</script>
</body>
</html>