What are the uses of index() in jquery?

There are four main ways to use index() in jquery: 1. Get the index of an element relative to its sibling element to determine its index value; 2. First select the specified set of elements based on the corresponding selector. , and then call the "index()" method to obtain the index of the element relative to a certain element collection; 3. Traverse all child elements under the parent element and obtain the index of all child elements; 4. Set the index of the element in the sibling element.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

In jQuery, `index()` can be used to get or set the index position of an element among its sibling elements. It has the following usage methods:

1. Get the index of the element relative to the sibling element

This usage is to get the index of the current element in the sibling element. position to determine its index value.

Example:

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

2. Get the index of an element relative to a certain element collection

When using this method, you must first follow the corresponding The selector selects the specified set of elements and then calls the `index()` method.

Example:

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

3. Get the index of all child elements

This method is to find by traversing all the child elements under the parent element. Target element and return the corresponding index.

Example:

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

4. Set the index of the element in the sibling element

In addition to the above-mentioned method of obtaining the element index , the `index()` method can also set the position of the specified element among sibling elements by passing in an index value.

Example:

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

It should be noted that this usage usually does not actually change the DOM structure. It just changes the order of the element inside jQuery and

The above is the detailed content of What are the uses of index() in jquery?. For more information, please follow other related articles on the PHP Chinese website!