jQuery中获取当前元素的索引值

当我们处理列表或表格中的数据时，需要对元素进行遍历并操作。在这个过程中，经常需要获取当前元素在列表或表格中的位置，也就是索引值（index）。

在jQuery中，我们可以使用index()方法获取当前元素在父元素中的索引值。但是，这个方法只适用于直接子元素的情况，如果元素存在多层嵌套，则需要使用 find()和index()方法结合使用来获取当前元素在所有父元素中的索引值。

使用index()方法获取直接子元素的索引值

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

上面的代码中，我们通过click()方法绑定了li元素的点击事件，然后通过$(this)获取当前点击的元素，并使用index()方法获取其在直接父元素ul中的索引值。

使用find()和index()方法获取所有父元素的索引值

$('table td').click(function() {
  var row = $(this).parent().index();
  var col = $(this).parent().find('td').index(this);
  console.log(row, col);
});

上面的代码中，我们通过click()方法绑定了td元素的点击事件，然后通过$(this)获取当前点击的元素。由于td元素存在于tr元素中，因此我们需要用parent()方法获取tr元素，并使用index()方法获取其在直接父元素table中的索引值。

但是，直接使用index()方法只能获得元素在直接父元素中的索引值，无法获取其在更高级别的父元素中的索引值。因此，我们还需要使用find()方法来查找所有的td元素，并使用index()方法来获取当前元素在所有td元素中的索引值。

注：find() 方法获取当前元素下所有的后代元素。

结论

使用index()方法能够方便地获取当前元素在列表或表格中的索引值，但需要注意其使用范围。如果元素存在多层嵌套，则需要结合find()方法来获取所有父元素中的索引值。

参考

• jQuery中的index()方法
• jQuery中的find()方法