<style>
a {
display: block;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid green;
}
</style>
<body>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</body>
<script>
$('a').mouseover(function () {
console.log($(this).index());
});
$('li').mouseover(function () {
console.log($(this).index());
})
</script>
从上方的图片可以看到 log 出 a 的索引号都为0,而 li 为正常情况。
故我测试是否为 jQuery获取 未被嵌套的 a 标签是否有这次问题,结果并没有这个情况。
<style>
a{
display: block;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid green;
}
</style>
<body>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</body>
<script>
$('a').mouseover(function () {
console.log($(this).index());
});
</script>
我再试了一下是否单只有 a 标签有这个问题,发现其他标签也是在被嵌套后,获取到的索引号也是为0。
<style>
ol {
display: block;
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid green;
}
</style>
<body>
<ul>
<li>
<ol></ol>
</li>
<li>
<ol></ol>
</li>
<li>
<ol></ol>
</li>
<li>
<ol></ol>
</li>
<li>
<ol></ol>
</li>
</ul>
</body>
<script>
$('ol').mouseover(function () {
console.log($(this).index());
});
$('li').mouseover(function () {
console.log($(this).index());
})
</script>
具体原因楼主并不知道。
在jQuery 的 index() 方法中,尽量获取外部元素的索引号,防止此情况发生。
如果有了解的老铁请在评论区指导一下,谢谢!