javascript - 单击时无法获取 child 的索引

Question

我正在尝试获取父元素中子元素的索引。我按照答案 here ，但以无限循环告终。

到目前为止我的代码:

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span = e.target;
    var spanSiblings = 0;

    while((span.previousElementSibling) != null ) {
        spanSiblings++;
    }

    console.log(spanSiblings);
});

目标是当用户点击第一个 span 时输出 0，因为它是“spans”id 中的第一个 child :

<div id="spans">
    <span>This is span #1</span>
    <span>This is span #2</span>
    <span>This is span #3</span>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

从 jQuery 中借鉴一点，它在 index 函数中使用 $.inArray 检查元素位置，您可以这样做

var div = document.getElementById("spans");
var spans = div.getElementsByTagName("span");

div.addEventListener('click', function(e) {
    var span  = e.target;
    var arr   = [].slice.call(spans);
    var index = arr.indexOf( span );

    console.log( index );
});

FIDDLE