.index()

分類：雜項 > DOM 元素方法

.index()傳回：整數

說明：從配對的元素中搜尋給定的元素。

傳回值

如果未將參數傳遞給 .index() 方法，傳回值會是一個整數，表示 jQuery 物件中第一個元素相對於其同層元素的位置。

如果對元素集合呼叫 .index()，且傳入 DOM 元素或 jQuery 物件，.index() 會傳回一個整數，表示傳入元素相對於原始集合的位置。

如果將選擇器字串傳遞為參數，.index() 會傳回一個整數，表示 jQuery 物件中第一個元素相對於選擇器比對到的元素的位置。如果找不到元素，.index() 會傳回 -1。

詳細資料

.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 ) );

我們會取得清單項目的 0 為基準的位置

索引：1

類似地，如果我們擷取包含三個清單項目之一的 jQuery 物件，.index() 會搜尋該清單項目

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

我們會取得清單項目的 0 為基準的位置

索引：1

請注意，如果用作 .index() 方法參數的 jQuery 集合包含多個元素，將會使用比對到的元素組中的第一個元素。

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

我們會取得比對到的組中第一個清單項目的 0 為基準的位置

索引：1

如果我們使用字串作為 .index() 方法的參數，它會被解釋為 jQuery 選擇器字串。會找出物件的比對到的元素中第一個也比對到此選擇器的元素。

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

我們會取得清單項目的 0 為基準的位置

索引：1

如果我們省略參數，.index() 會傳回比對到的元素組中第一個元素相對於其同層元素的位置

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

我們會再次取得清單項目的 0 為基準的位置

索引：1

範例

按一下時，傳回該 div 在頁面中的索引（從 0 開始）。

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.jquery.com/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.jquery.com/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.jquery.com/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.jquery.com/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.jquery.com/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.jquery.com/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>

示範