クリックしたときに一連の要素の要素のDOM位置を決定する方法

Question

このシナリオでは、それぞれに対応するコンテンツ領域を持つ一連のリスト項目があります。リストアイテムをクリックすると、対応するコンテンツ領域が操作される（すなわち、第1のリストアイテムがクリックされた場合、第1のコンテンツセクションが操作される）。これを行うための私のオールドスクールな方法は、私は、その後の解析しまうなど「LI1」、「LI2」などと「セクション1」、「section2の」、として、各リスト項目とセクションにIDを与えていた

<ul> 
    <li>List item</li> 
    <li>List item</li> 
    <li>List item</li> 
</ul> 

<div> 
    <section>Content section</section> 
    <section>Content section</section> 
    <section>Content section</section> 
</div> 

クリックされた要素のidの整数で、対応するセクションを操作します。

余分なID属性を必要とせずにこれを判断する方法はありますか？たとえば、3番目のリストアイテムをクリックしてそのアイテムが3番目であることがわかっている場合は、document.querySelector('div:nth-child(3)')を使用して3番目のコンテンツセクションを操作できます。私の質問は、それが最初にクリックされたシリーズの3番目の要素であることを知る方法です。

私の最初の考えソリューションは、このようなものだった：

var target = e.target; 
var parent = e.target.parentNode; 

for (var i in parent.childNodes) { 
    if (parent.childNodes[i].nodeType == 1 && parent.childNodes[i] == target) { 
     // found it... i+1 
    } 
} 

これは、より多くのリスト項目と内容のセクションがあった場合は特に、ただのIDを使用する場合と比較してかなり高価な操作のように思えます。私はまだ私が見つけていない正しいDOM位置を与えるノード属性があることを望んでいます。

最新のブラウザ専用ソリューションが歓迎されています。ありがとう。

Answer 1

アップデート2016

まあ、私はほぼ5年後に再びこの問題に私が使用してはるかに簡単な解決策を使用のみ、この時間を実行してきました内蔵の配列方法：

var index = Array.prototype.indexOf.call(event.target.parent.children, event.target); 

Answer 2

私はあなたがここで何をしているのかわかりませんが、もっとデータ指向のアプローチが必要です。 liとsectionの両方が、同じProductまたはPersonまたは何かを参照しているように、その参照で見つけることができます。

そうでなければ、このようなあなたの場所をカウントするpreviousElementSiblingメソッドを使用することができます

var position = function(el) { 
    var count = 1; 
    for(var cur = el.previousElementSibling; 
      cur !== null; cur = cur.previousElementSibling) { 
    count++; 
    } 
    return count; 
}; 

GL

Answer 3

私のようなものを使用したい：

var target = e.target, 
    i = 0; 
while(target = target.previousSibling) { 
    i += target.nodeType == 1; 
} 
alert('you clicked on '+i); 

フィドル：http://jsfiddle.net/K5Qg9/1/

をまた、データlibを使用してみたり、elemeにものを割り当てたりすることもできますNT expano onloadイベント：

var elems = document.getElementsByTagName('li'), 
    i=0; 
for(; elems[i]; i++) { 
    elems[i].rel = i; 
} 

それからちょうどonclickのe.target.relを取り出します。フィドル：http://jsfiddle.net/UnrCt/

Answer 4

あなたはjQueryのを使用することができる場合：$(elem).index()