javascript - 同じ型の要素に関する要素のインデックス?

Question

重複の可能性:
DOM 内の要素のインデックスではなく、選択した要素の位置を取得する

JQueryを使用して、他のタイプの兄弟を無視して、同じタイプの他の兄弟に関して要素のインデックスを取得する最適な方法は何ですか?

<span/>
<span/>
<div/>
<span/> <-- index of this guy in regard to just span tags? (answer: 2)

Answer 1

要素参照を比較して jQuery でこれを行う方法の例:

jquery ソリューション:

var tested_element = document.getElementById('tested');
alert( $('#test').children('span').index(tested_element) ); // result: 2

JavaScript ソリューション:

var tested = document.getElementById('tested');
var container = document.getElementById('test');
var node = container.childNodes[0];
var position = 0;
while ( node && node != tested ){
    if (node.nodeType == 1 && node.tagName == 'SPAN') {
        position++;
    }
    node = node.nextSibling;
}
if (!node) {
    position = -1; // element not found
}
alert(position);

テストされたhtml:

<div id="test">
    <span>A</span>
    <span>B</span>
    <div>C</div>
    <span id="tested">D</span>
    <span>E</span>
</div>