返回值
如果沒有參數傳遞給 .index() 方法，則返回值是一個整數，指示 jQuery 對象中的第一個元素相對於其兄弟元素的位置。
如果在元素集合上調用 .index() 並傳入 DOM 元素或 jQuery 對象，則 .index() 返回一個整數，指示所傳遞元素相對於原始集合的位置。
如果選擇器字符串作為參數傳遞，.index() 返回一個整數，指示 jQuery 對象中的第一個元素相對於選擇器匹配的元素的位置。如果未找到該元素，.index() 將返回 -1。
細節
.get() 的補充操作，它接受一個索引並返回一個 DOM 節點，.index() 可以接受一個 DOM 節點並返回一個索引。假設我們在頁麵上有一個簡單的無序列表：
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
|
如果我們檢索三個列表項之一(例如，通過 DOM 函數或作為事件處理程序的上下文)，.index() 可以在匹配元素集中搜索此列表項：
var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
|
我們取回列表項從零開始的位置：
索引：1
同樣，如果我們檢索由三個列表項之一組成的 jQuery 對象，.index() 將搜索該列表項：
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );
|
我們取回列表項從零開始的位置：
索引：1
請注意，如果用作 .index() 方法參數的 jQuery 集合包含多個元素，則將使用匹配的元素集中的第一個元素。
var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );
|
我們取回匹配集中第一個列表項的從零開始的位置：
索引：1
如果我們使用字符串作為.index() 方法的參數，它會被解釋為jQuery 選擇器字符串。定位對象的匹配元素中也匹配此選擇器的第一個元素。
var listItem = $( "#bar" );
alert( "Index: " + listItem.index( "li" ) );
|
我們取回列表項從零開始的位置：
索引：1
如果我們省略參數，.index() 將返回匹配元素集中第一個元素相對於其兄弟元素的位置：
alert( "Index: " + $( "#bar" ).index() );
|
再次，我們取回列表項的從零開始的位置：
索引：1
單擊時，返回頁麵中該 div 的索引(從零開始)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
background: yellow;
margin: 5px;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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 that was clicked
var index = $( "div" ).index( this );
$( "span" ).text( "That was div index #" + index );
});
</script>
</body>
</html>
|
演示：
返回 ID 為 bar 的元素的索引。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
演示：
返回 jQuery 集合中第一項的索引。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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" ).slice( 1 );
$( "div" ).html( "Index: " + $( "li" ).index( listItems ) );
</script>
</body>
</html>
|
演示：
返回 ID 為 bar 的元素相對於所有 <li> 元素的索引。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
演示：
返回 ID 為 bar 的元素相對於其兄弟元素的索引。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
演示：
返回 -1，因為沒有 ID 為 foobar 的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index demo</title>
<style>
div {
font-weight: bold;
color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.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>
|
演示：
