javascript - 父元素的哪个子编号是子编号-这是属性吗？

三个div：

<div id='container'>
    <div id='one'>One</div>
    <div id='two'>Two</div>
    <div id='three'>Three</div>
</div>

单击后，它们报告父元素中的子编号：

function whatAmI(source){
    //this function tells you which number the child is
    //in everything nested in the parent element
    for(x=0;x<source.parentElement.children.length;x++){
        if(source.parentElement.children[x]==source){
            return alert("I am child #" + x);
        }
    }
}

container = document.getElementById('container')
for(x=0;x<container.children.length;x++){
    container.children[x].addEventListener('click',
              function(){
                  return whatAmI(this)
              })
}

这是一种真正的回旋方式吗？通过遍历父级。当然必须有更好的属性？

JSFiddle：http://jsfiddle.net/H9aLf/

最佳答案

如果您在支持Array.prototype.indexOf的环境中（例如，现代浏览器，包括IE9 +或node.js），则可以使用它代替whatAmI：

container = document.getElementById('container')
for(x=0;x<container.children.length;x++){
    container.children[x].addEventListener('click', function(){
        alert(Array.prototype.indexOf.call(container.children, this))
    });
}

http://jsfiddle.net/nNYUm/

由于这是通用方法，因此可以在像container.children这样的NodeList上进行操作。

您还可以通过将点击委托给父div来删除为每个子div创建点击处理程序的循环：

container = document.getElementById('container')
container.addEventListener('click', function(e){
    alert(Array.prototype.indexOf.call(container.children, e.target));
});

http://jsfiddle.net/nNYUm/1

关于javascript - 父元素的哪个子编号是子编号-这是属性吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16677140/