有序列表索引

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或更低版本中未实现Element Traversal(但它在IE9中).

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

如果您start在OL元素上设置了属性,那么只需修改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/

Answer 2

jQuery有一个.index()函数,它返回元素在其父元素中的位置.只要您对使用jQuery感到满意,那就应该按照您的要求进行.

例如,给定以下HTML:

<ul>
    <li></li>
    <li class="myli"></li>
    <li></li>
</ul>

以下javascript应该返回1(索引从0开始)

$('.myli').index();