海滨擎蟹

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 > liol > litable > 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 位置。

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »