请问怎么获取当前点击的className是第几个

Question

比如一个以下结构，我想写一个方法当单击到对应的class的div的时候，告诉我点击的是第几个

<div id="main_box">
    <div class="text">jkljdasjlkdjaslk</div>
    <div class="text">fdgdfgd</div>
    <div class="text">gdfgfd</div>
    <div class="text">ghgfhfg</div>
</div>

我自己的思路如下，我想用正则来代替任意数字，但是好像这样也不对，因为浏览器应该也不会告诉我点击的是第几个

window.onload = function() {
    mainBox = document.getElementById("main_box");
    
    function editText(){
        getText = event.srcElement.className;
        document.getElementsByClassName(getText)[RegExp(/^d+$/)].onclick = function (){
            alert('您点击的是第几个：');
        }    
    }

    mainBox.onmouseover = editText; //绑定了事件相应的范围
}

Answer 1

使用正则表达式不会产生数字，而且写法有错误，数字是\d吧，试试下面这种比较经典方法

window.onload = function() {
  textObj = document.getElementsByClassName('text');

  for(var i = 0; i<textObj.length; i++){
    textObj[i].index = i;
    textObj[i].onclick = function () {
      alert(this.index + 1);
    }
  }
}

Answer 2

    window.onload = function () {
        mainBox = document.getElementById("main_box");

        function editText() {
            var getText = event.srcElement.className;
            var obj = document.getElementsByClassName(getText);
            var i;
            for (i = 0; i < obj.length; i++) {
                (function (i) {
                    obj[i].onclick = function () {
                        alert('您点击的是第几个：' + i + 1);
                    }
                })(i);
            }
        }

        mainBox.onmouseover = editText; //绑定了事件相应的范围
    }

Answer 3

遍历 看下标呗

Answer 4

jquery .index()

Answer 5

1. 遍历给.text的div添加自定义属性data-xx来表示其index，点击时获取该属性值
2. 点击时通过拿到当前点击div的offsetTop和offsetHeight去判断其所属位置是第几
3. 获取点击div的previousSibling，向左一直获取，一直到获取不到，记录步数

Answer 6

window.onload = function () {
    var mainBox = document.getElementById("main_box");
    function editText(e) {
           let text = mainBox.getElementsByClassName('text');
        Array.prototype.forEach.call(text,function(obj,index){
            obj.onclick = function(){
                console.log(index);
            }
        });
    }

    mainBox.onmouseover = editText; //绑定了事件相应的范围
}

Answer 7

this.index()