[解決済み] JavaScript DOM: コンテナ内の要素インデックスを検索する

質問

オブジェクトの参照によってコンテナ内の要素のインデックスを見つける必要があります。不思議なことに、私は簡単な方法を見つけることができません。jQueryはありません - DOMだけにしてください。

UL
 LI
 LI
 LI - my index is 2
 LI

はい、私は各要素にIDを割り当て、IDに一致するようにすべてのノードを介してループすることができますが、それは悪い解決策のように思われます。何かもっといい方法はないでしょうか？

上の例のように、3番目のLIへのオブジェクト参照を持っているとします。それがインデックス 2 であることをどのようにして知ることができますか?

ありがとうございます。

どのように解決するのですか？

を使用することができます。 Array.prototype.indexOf . そのためには、多少 "キャスト"する必要があります。 HTMLNodeCollection を真の Array . 例えば

var nodes = Array.prototype.slice.call( document.getElementById('list').children );

では、呼び出せばいいだけです。

nodes.indexOf( liNodeReference );

例

var nodes = Array.prototype.slice.call( document.getElementById('list').children ),
    liRef = document.getElementsByClassName('match')[0];

console.log( nodes.indexOf( liRef ) );

<ul id="list">
    <li>foo</li>
    <li class="match">bar</li>
    <li>baz</li>    
</ul>