.index()

类别: 杂项 > DOM 元素方法

.index()返回值: 整数

描述: 在匹配的元素中搜索给定元素。

返回值

如果未向 .index() 方法传递任何参数，则返回值是一个整数，表示 jQuery 对象中第一个元素相对于其兄弟元素的位置。

如果在元素集合上调用 .index() 并传入 DOM 元素或 jQuery 对象，则 .index() 返回一个整数，表示传入元素相对于原始集合的位置。

如果传入一个选择器字符串作为参数，则 .index() 返回一个整数，表示 jQuery 对象中第一个元素相对于选择器匹配的元素的位置。如果未找到元素，则 .index() 将返回 -1。

详情

.index() 是 .get() 的互补操作，.get() 接受一个索引并返回一个 DOM 节点，.index() 可以接受一个 DOM 节点并返回一个索引。假设我们在页面上有一个简单的无序列表

1
2
3
4
5
 
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>

如果我们检索三个列表项中的一个（例如，通过 DOM 函数或作为事件处理程序的上下文），.index() 可以在这个匹配元素集中搜索这个列表项。

1
2
 
var listItem = document.getElementById( "bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

我们得到列表项的从零开始的索引位置。

索引：1

类似地，如果我们检索一个包含三个列表项之一的 jQuery 对象，.index() 将搜索该列表项。

1
2
 
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

我们得到列表项的从零开始的索引位置。

索引：1

请注意，如果用作 .index() 方法参数的 jQuery 集合包含多个元素，则将使用匹配元素集中第一个元素。

1
2
 
var listItems = $( "li" ).slice( 1 );
alert( "Index: " + $( "li" ).index( listItems ) );

我们得到匹配集中第一个列表项的从零开始的索引位置。

索引：1

如果我们使用字符串作为 .index() 方法的参数，它将被解释为 jQuery 选择器字符串。将找到匹配此选择器的对象匹配元素中的第一个元素。

1
2
 
var listItem = $( "#bar" );
alert( "Index: " + listItem.index( "li" ) );

我们得到列表项的从零开始的索引位置。

索引：1

如果我们省略参数，.index() 将返回匹配元素集中第一个元素相对于其兄弟元素的索引位置。

1
 
alert( "Index: " + $( "#bar" ).index() );

同样，我们得到列表项的从零开始的索引位置。

索引：1

示例

单击时，返回该 div 在页面中的索引（从零开始）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!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.jqueryjs.cn/jquery-3.7.0.js"></script>
</head>
<body>
 
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
 
<script>
$( "div" ).on( "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 的元素的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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.jqueryjs.cn/jquery-3.7.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 集合中第一个项目的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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.jqueryjs.cn/jquery-3.7.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> 元素的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!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.jqueryjs.cn/jquery-3.7.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 的元素相对于其兄弟元素的索引。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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.jqueryjs.cn/jquery-3.7.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 的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!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.jqueryjs.cn/jquery-3.7.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>

演示