Question

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

例如，如果有人点击第3个列表项中的链接，它会给我一个值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：向列表中的所有链接添加一个click事件，首先选择链接的父“li”元素，然后向后选择每个'li'元素，直到没有更多要选择，并且空的jquery对象是回。应该很容易适应。

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

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

3 个答案: