使用$()选择器获取相同一类DOM元素的伪数组,index问题

本文链接：https://blog.csdn.net/Leader_yuxi/article/details/127903771

项目场景：

提示：这里简述项目相关背景：
jquery项目中经常会使用$()选择器获取相同一类DOM元素的伪数组,然后通过下标index操作指定位置的DOM元素

问题描述

提示：这里描述项目中遇到的问题：
指定的index往往不是自己想要的那一个
点击当前元素的index值全是0

<body>
    <div><a href="#">0</a></div>
    <div><a href="#">1</a></div>
    <div><a href="#">2</a></div>
    <div><a href="#">3</a></div>
</body>
<script>
 $("a").click(function(){
        console.log("当前点击元素的index值:"+$(this).index())
    })
    </script>

原因分析：

提示：这里填写问题的分析：
如果被点击的元素没有父级就正常,有父级元素就是当前元素父级内的下标

在这里插入图片描述

<body>
    <a href="#">0</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</body>
<script>
 $("a").click(function(){
        console.log("当前点击元素的index值:"+$(this).index())
    })
    </script>

解决方案：

提示：这里填写该问题的具体解决方案：

如果要操作的元素有父级就取到最外层同级盒子索引


<body>
    <div><a href="#">0</a></div>
    <div><a href="#">1</a></div>
    <div><a href="#">2</a></div>
    <div><a href="#">3</a></div>
</body>

<script>
 $("a").click(function(){
        console.log("当前点击元素的index值:"+$(this).parents().index())//
        //$(this).index()只代表被点击元素在当前盒子中的索引而不是$("a")伪数组中的索引,$(this).parents().index()找到遍历最外层盒子索引
    })
 </script>