Javascript 获取列表项在无序列表中的位置（即第三个列表项为3）

我有一个无序的列表，里面有几个列表项。每一个里面都有一个链接。我想做的是在有人单击列表项中的链接时查找列表项的位置

例如，如果有人单击第三个列表项内的链接，它会给我一个值3

我已经有了单击部分，只需要找出如何获得列表项的位置

---

仅Javascript

下面是一个简单的实时示例，它可以满足您的需要（列表中没有链接除外）

在“结果”框中，单击其中一个列表项。它将有一个弹出其序列号的处理程序

Javascript代码如下所示

var els = document.getElementsByTagName('li');

Array.prototype.forEach.call(els,function(el,i){
    el.addEventListener('click', function(){alert(i);}, false);
  }) ;

尽管

els

类似于数组，但它没有

forEach

方法。我们通过使用

Array.prototype.forEach

方法来解决这个问题

更新：这里是第二个实例，它将内容缩小到一个特定列表，而不是所有列表项

---

此外，正如一位评论者指出的那样，

forEach

并没有得到普遍支持，但这里使用它来简化代码。

使用jQuery：向列表中的所有链接添加一个单击事件，该事件首先选择链接的父“li”元素，然后向后选择每个“li”元素，直到没有更多的元素可供选择，并返回一个空jquery对象。应该很容易适应

// A ul only has li childnodes.

count 'backwards' from the  li element containing the clicked link.


var count= 1, li= linkelement;
while(li && li.nodeName!= 'LI') li= li.parentNode; // get the li element
while(li){
    li= li.previousSibling;
    // count previous li elements
    ++count;
}
alert(count)// firstChild is 1, not 0

$('li a').click(function(){
    $node = $(this).parent();
    result = 0;
    while ($node.length > 0){
        result++;
        $node = $node.prev();
    }
    alert(result);
    return false;
});

---

您应该首先测试

Array.prototype.forEach

，它并不是到处都实现的。@RobG，这是我的想法，但为了简单起见忽略了它，谢谢您指出了这一点。这非常有效。但这会考虑页面上的所有列表项。我可以把它缩小到一个特定的无序列表吗？如果你不想让它计算嵌套的无序列表，你会怎么做？@brainjam好极了！感谢非常有用的示例代码+解释。对不起，我应该声明我只需要javascript。我会调整我的帖子。@Noah，这只是javascript！不用担心…brainjam的答案更聪明。。。