jQuery index() 获取到的值都为0

爆炒薄荷糖

于 2021-11-23 02:01:35 发布

阅读量1.3k

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/qq_52646455/article/details/121484585

版权

<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() 方法中，尽量获取外部元素的索引号，防止此情况发生。
如果有了解的老铁请在评论区指导一下，谢谢！

爆炒薄荷糖

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
jQuery index() 获取到的值都为0

<style> a { display: block; width: 50px; height: 50px; margin: 5px; border: 1px solid green; }</style><body> <ul> <li><a href=""></a></li>
复制链接

扫一扫