jQuery 杂项 index() 方法

在 jQuery 中，index() 方法用于获取匹配元素在其父元素中的索引位置。这个方法在处理一些特定的情况下非常有用，例如需要获取某个元素在其父元素中的位置，或者需要根据当前元素的索引位置进行一些操作。

语法

$(selector).index()

参数

该方法不接受任何参数。

返回值

index() 方法返回一个整数值，表示匹配元素在其父元素中的索引位置。索引值从 0 开始，如果元素不在父元素中，则返回 -1。

示例

假设我们有以下 HTML 结构：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="selected">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

我们可以使用 index() 方法来获取选中元素的索引位置：

var selectedIndex = $('.selected').index();
console.log(selectedIndex); // 输出 2

在这个例子中，我们选中了具有 "selected" 类的 li 元素，并使用 index() 方法获取其在父元素 ul 中的索引位置，结果为 2。

另外，如果我们想要获取所有 li 元素的索引位置，可以使用 each() 方法：

$('li').each(function() {
  var index = $(this).index();
  console.log(index);
});

这段代码会遍历所有 li 元素，并输出它们在父元素中的索引位置。

总结

通过 index() 方法，我们可以方便地获取匹配元素在其父元素中的索引位置，从而更灵活地操作 DOM 元素。这个方法虽然看似简单，但在实际开发中却有着很多实用的场景，希望本文可以帮助你更好地理解和应用这个方法。