Javascript-委托click事件并检测子元素的位置（与第一个孩子比较）

Question

    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>

当我单击child元素之一时，我找到了使用javascript的适当方法。 我发现元素的位置（ not coordinate ），例如该元素是parent元素的第三parent元素。 我的要求与检测子节点编号相同

Answer 1

<script>
    $(document).ready(function () {        
        $('.child').click(function () {
            alert("Position is" + ($(this).index() + 1))
        });
    });
</script>
 <div class="parent" >
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
        <div class="child">5</div>
    </div>

Answer 2

在JavaScript中，您可以使用它的支持，即较低的版本

    <script>
    debugger
    window.onload = function () {
        var childs = document.getElementById('parent').childNodes;

        for (var i = 0; i < childs.length; i++) {
            childs[i].onclick = function () {
                debugger
                var pos = indexInParent(this);
                alert(pos+1);
            }
        }
    };
    function indexInParent(node) {
        debugger
        var children = node.parentNode.childNodes;
        var num = 0;
        for (var i = 0; i < children.length; i++) {
            if (children[i] == node) return num;
            if (children[i].nodeType == 1) num++;
        }
        return -1;
    }
</script>
<div class="parent" id="parent">
    <div class="child">
        1</div>
    <div class="child">
        2</div>
    <div class="child">
        3</div>
    <div class="child">
        4</div>
    <div class="child">
        5</div>
</div>