javascript - 有序列表索引

Question

有什么方法可以获取有序列表中 li 标签的编号(索引)？

我正在尝试获取显示在侧面的数字(列表编号)。我知道传统的方法是使用存储行号的 id，但这意味着如果在两者之间添加一行，则必须编辑很多 id。尽管我为此开发了一种算法，但它的效率并不高。

我正在寻找在 Javascript 中使用的解决方案。

Answer 1

您可以使用 previousElementSibling一步一步跳到列表的开头，然后计算你跳了多少次:

ol.onclick = function(e) {
    var li = e.target,
        i = 1;

    while ( li.previousElementSibling ) {
        li = li.previousElementSibling;
        i += 1;   
    }

    alert( 'Index = ' + i );
};

请注意，元素遍历在 IE8 或以下版本中未实现(但在 IE9 中)。

现场演示: http://jsfiddle.net/simevidas/U47wL/

---

如果您在 OL 元素上设置了 start 属性，那么只需修改声明 i 的行:

i = ol.start || 1;

现场演示: http://jsfiddle.net/simevidas/U47wL/2/

---

如果你需要一个跨浏览器的解决方案，那么你可以使用previousSibling然后检查兄弟节点是否是一个元素节点，然后才递增:

ol.onclick = function(e) {
    var e = e || window.event,
        li = e.target || e.srcElement,
        i = ol.start || 1;

    while ( li.previousSibling ) {
        li = li.previousSibling;
        if ( li.nodeType === 1 ) { i += 1; }   
    }

    alert( 'Index = ' + i );
};

现场演示: http://jsfiddle.net/simevidas/U47wL/4/

---

jQuery 解决方案:

$('ol').click(function(e) {
    var n = $(e.target).index() + this.start;

    alert( 'Index = ' + n );    
});

现场演示: http://jsfiddle.net/simevidas/U47wL/5/