jquery获取下标

jQuery 获取元素下标的方法

在 jQuery 中，可以通过以下几种方式获取元素在其父元素或集合中的下标。

使用 index() 方法

index() 方法返回指定元素相对于同级元素的索引位置。如果不传递参数，返回当前元素在其父元素中的位置。

// 获取当前元素在父元素中的下标
var index = $('.item').index();

// 获取当前元素在指定集合中的下标
var indexInList = $('.item').index($('.list li'));

使用 each() 方法遍历

在遍历元素集合时，可以通过回调函数的参数获取当前元素的下标。

$('.item').each(function(index) {
    console.log(index); // 输出当前元素的下标
});

使用 eq() 方法结合循环

通过循环或条件判断，可以手动获取元素的下标。

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

示例场景

假设有以下 HTML 结构：

<ul class="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

获取第二个 li 元素的下标：

var index = $('.list li').eq(1).index();
console.log(index); // 输出 1

注意事项

• index() 方法默认从 0 开始计数。
• 如果元素不在指定的集合中，index() 返回 -1。
• 使用 each() 时，回调函数的第一个参数即为下标。