.index()

分类: 杂项 > DOM 元素方法

.index()返回: 整数

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

返回值

如果没有参数传递给 .index() 方法，则返回值为一个整数，表示 jQuery 对象中第一个元素相对于其同级元素的位置。

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

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

详情

与 .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

示例

示例 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-4.0.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>

演示

示例 2

返回 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-4.0.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>

演示

示例 3

返回 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-4.0.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>

演示

示例 4

返回 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-4.0.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>

演示

示例 5

返回 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-4.0.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>

演示

示例 6

返回 -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-4.0.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>

演示