jQuery index() 方法浅析

定义

w3cschool 的定义：index() 方法返回指定元素相对于其他指定元素的 index 位置。（定义有误，结论会有说明）

测试

偶然的机会，在给 a 标签设置类样式，点击需要切换选中样式，发现 $('.group-a').index() 获取到的索引值竟然是从 1 开始的。这与我之前的认知不符，一般索引都是从 0 开始的。之前在做官网首页 tab 切换的时候，也接触过这个方法。

功能点是点击 tab 切换选中状态并展示不同 tab content 内容。代码大致如下：

$(".quick-switch > li").click(function(){
    console.log($(this).index());
    $(this).addClass('active').siblings().removeClass("active");
    $(".quick-content > li").eq($(this).index()).addClass('active').siblings().removeClass("active");
});

tab 本身使用 ul > li 的结构，tab content 内容也是如此。测试 $(this).index() 输出的值是从 0 开始的。

这引发了我的好奇心。index() 方法在什么情况下会输出索引从 0 开始，又是在什么情况下输出索引不是从 0 开始的呢？

猜测这种情况与标签本身、标签的父标签、类选择器有关。新建一个 html 测试页面，选取了 ul > li、ol > li、table > tr > td 和 a 标签分别做对比测试。

测试环境：win7，Chrome，jQuery 1.8.2。

经过多组测试发现，li、tr、td 这样成组出现的标签，索引值从 0 开始；而 a 标签经过对比测试和独立测试后发现，如果直接放在 body 内，会将 a 标签前面的对象计算在内，而如果整组出现在 div、i、span 等标签内时，也会将这些标签内的其他元素计算在内。如果没有其他元素，则 a 标签索引也是从 0 开始的。如果将 li、tr、td 等成组出现的标签的父级去掉，这些标签会呈现跟非成组标签一样的性质。使用类选择器对结果没有影响。

再回来查看代码发现，确实是 a 标签前面还存在隐藏类型的 input 标签，将其放到 a 后面，index() 索引值恢复正常。

结论

index() 方法返回元素在父节点下的索引值，只与其相对位置有关。即使是使用了类选择器或特定标签指定元素，返回值依然只与其在父节点下的相对位置有关，与标签类型、类选择器无关。

所以 w3cschool 的定义是不准确的，应该是 index() 方法返回指定元素相对于父节点下其他元素的 index 位置。