JS怎么获取当前点击的子元素的下标

Question

<div class=“main">
<div class=“child"></div>
<div class=“child"></div>
<div class=“child"></div>
<div class=“child"></div>
</div>
我点击了第3个子元素的div，怎么获取其的下标index值?

Answer 1

是获得索引么?不考虑兼容问题，用一下document.getElementsByClassName

var child = document.getElementsByClassName("child");
for (var i = 0; i < child.length; i++) {
    var a = child[i];
    a.index = i;//给每个className为child的元素添加index属性;
    a.onclick = function () {
        alert(this.index)
    }
}

这样你每次点击就能获得你点击的元素的index

Answer 2

<div id="main" class=“main">
<div class=“child"></div>
<div class=“child"></div>
<div class=“child"></div>
<div class=“child"></div>
</div>window.onload = function () {
var main = document.getElementById("main");

var divs = main.getElementsByTagName("div");

for (var i = 0; i < divs.length; i++) {
divs[i].indexs = i;
}

}

然后你的class是child的div都有indexs属性了，直接获取本回答被提问者采纳