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

Question

我有一个无序列表，里面有几个列表项。每个里面都有一个链接。我想要做的是当有人点击里面的链接时找到列表项的位置。

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

我已经有了点击部分，只需要弄清楚如何获取列表项的位置

仅限 JavaScript

Answer 1

这是一个简单的实时示例，可以满足您的需求（列表没有链接除外）

http://jsfiddle.net/8k926/2/

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

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方法来解决这个问题。

更新：这是第二个实例，它将事物缩小到特定列表，而不是所有列表项。

http://jsfiddle.net/8k926/3/

此外，正如评论者指出的那样，forEach它并未得到普遍支持，但在这里用于简化代码。

Answer 2

// 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

Answer 3

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

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