jquery中index()的用法有哪些

jquery中index()的用法主要有四種：1、取得元素相對於同級元素的索引，來確定其索引值；2、先根據對應的選擇器選出指定的元素集，然後呼叫「index()」方法取得元素相對於某個元素集合的索引；3、遍歷父元素下的所有子元素，取得所有子元素的索引；4、設定元素在同級元素中的索引。

本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。

jQuery 中 `index()` 可以用來取得或設定一個元素在其兄弟元素中的索引位置。它有以下幾種使用方式：

1、取得元素相對於同級元素的索引

這種用法透過取得目前元素在同級元素中的位置，來決定其索引值。

範例：

```
$('li').click(function() {
  let index = $(this).index();
  console.log(index); // 返回被点击的 li 在所有 li 元素中的索引位置
});
```

2、取得元素相對於某個元素集合的索引

在使用此種方法時先要根據對應的選擇器選取指定的元素集，然後呼叫`index()` 方法。

範例：

```
let $lis = $('ul li');
$('li').click(function() {
  let index = $(this).index($lis);
  console.log(index); // 返回被点击的 li 元素相对于 allLis 的索引位置
});
```

3、取得所有子元素的索引

此方法是透過遍歷父元素下的所有子元素，查找到目標元素並傳回相應的索引。

範例：

```
$('ul').children().click(function() {
  let index = $(this).index();
  console.log(index); // 返回被点击的子元素在父元素下所有子元素中的索引位置
});
```

4、設定元素在同級元素中的索引

除了上面提到的取得元素索引的使用方式外，`index()` 方法也可以透過傳入一個索引值來設定指定元素在同級元素中的位置。

範例：

```
$('li').click(function() {
  $(this).index(0); // 将被点击的 li 元素设置为所有兄弟节点中的第一个
});
```

需要注意的是，這種用法通常不會真正改變 DOM 結構。它只是改變了該元素在 jQuery 內部的排列順序，並

以上是jquery中index()的用法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！