js获取当前元素下标

最新推荐文章于 2024-07-28 04:03:30 发布

Utopian_x

最新推荐文章于 2024-07-28 04:03:30 发布

阅读量1k

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Utopian_x/article/details/120641089

版权

本文介绍了如何使用JavaScript为HTML中的所有<span>元素添加点击事件，并在点击时输出当前元素的索引。通过querySelectorAll获取span元素并设置索引，实现了一次性为多个元素添加自定义行为。

摘要由CSDN通过智能技术生成

js部分

<script>
    var span = document.querySelectorAll("sapn"); //获取所有span元素
    for (var i = 0; i < span.length; i++) {
        span[i].index = i; //为元素下标赋值
        span[i].addEventListener("click", function() { //给所有span元素添加点击事件
            console.log(this.index);
        })
    }
</script>

html部分

<body>
    <div>div
        <p>p1
            <sapn>span1</sapn>
            <sapn>span2</sapn>
            <sapn>span3</sapn>
            <sapn>span4</sapn>
        </p>
    </div>
</body>

逐个点击效果