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/

如果您在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/

Answer 2

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

例如，给定以下HTML：

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

以下javascript应返回1（索引从0开始）

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

Answer 3

您可以在li元素的父元素中尝试getElementsByTagName并遍历它们，并增加索引，getElementsByTagNames的结果与它们在DOM树中显示的顺序相同。请参阅此示例：http://jsfiddle.net/s3p7C/

<ol id='myList'>
    <li> one </li>
    <li> two </li>
    <li> three </li>
</ol>

var parent = document.getElementById('myList');
var elems = parent.getElementsByTagName('LI');
var res = "";
for(var i=0;i< elems.length ; i++)
{
    res +=  "li with index: " + i + " has content:" + elems[i].innerHTML;
    res += "\n";
}

alert(res);

Answer 4

这是一种方法JSFiddle Demo：

点击li节点，它将console.log索引号

<ol start='5'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

document.onclick = function(e) {
    if (e.target.parentNode.nodeName == 'OL') {
        var els = e.target.parentNode.getElementsByTagName('li');
        var startNum = (e.target.parentNode.getProperty('start') == undefined) ? 1 : +e.target.parentNode.getProperty('start');
        for (var i = 0; i < els.length; i++) {
            if (els[i] === e.target) {
                console.log(i + startNum);
                return;
            }
        }
    }
}

Answer 5

// 不是特别对于列表，但这是一种获得的方式元素本身内元素的索引。它不会计算任何兄弟姐妹的后代，只有具有相同标签的兄弟姐妹。

function nthTag(who){
    var tag= who.tagName, count= 0;
    while(who){
        if(who.tagName=== tag)++count;
        who= who.previousSibling;
    }
    return count;
}

有序列表索引

5 个答案: