2

3 つの 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/

4

2 に答える 2

2

サポートする環境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

于 2013-05-21T18:41:50.443 に答える