返回值
如果没有参数传递给 .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>
|
演示：
