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

Question

三个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/

Answer 1

如果您处于支持的环境中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/

由于它是一种通用方法，因此它可以在 NodeList 上进行操作，例如container.children.

您还可以通过将点击委托给父 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

Answer 2

我认为您正在寻找 jQuery 的index方法。

根据他们的文档，这是一个 jsfiddle：工作示例