Javascript 有序列表索引

有没有办法获得有序列表中

li

标记的编号（索引）

我正在尝试获取侧面显示的编号（列表编号）。我知道传统的方法是使用一个id来存储行号，但这意味着如果在行号之间添加一行，则需要编辑很多id。尽管我已经为此开发了一个算法，但它并没有那么有效

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

jQuery有一个

.index（）

函数，它返回元素在其父元素中的位置。只要您乐于使用jQuery，就可以满足您的要求

例如，给定以下HTML：

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

---

您可以尝试在li元素的父元素中使用getElementsByTagName并遍历它们，并增加索引，getElementsByTagName结果的顺序与它们在DOM树中的显示顺序相同。 请参见以下示例：

一个
两个
三

---

var parent=document.getElementById（'myList'）；
var elems=parent.getElementsByTagName（'LI'）；
var res=“”；
对于（变量i=0；i

这是一种方法：

单击

li

节点，它将

console.log

索引号

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

一,
二,
三,
四,

---

document.onclick=函数（e）{
if（e.target.parentNode.nodeName=='OL'）{
var els=e.target.parentNode.getElementsByTagName（'li'）；
var startNum=（e.target.parentNode.getProperty（'start'）==未定义）？1:+e.target.parentNode.getProperty（'start'）；
对于（变量i=0；i

您可以使用逐步跳转到列表的开头，只需计算您跳转的次数：

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

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

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

请注意，元素遍历并没有在IE8或更低版本中实现（但在IE9中实现）

现场演示：

---

如果在OL元素上设置了

start

属性，则只需修改声明了

i

的行即可执行以下操作：

i = ol.start || 1;

现场演示：

---

如果需要跨浏览器的解决方案，则可以使用

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 );
};

现场演示：

---

jQuery解决方案：

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

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

现场演示：

/ 不是特别针对列表，但这是一种获得 父元素内的元素索引，从元素本身开始。 它不会计算兄弟姐妹的任何分数，只计算具有相同标记的兄弟姐妹

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

---

如果使用该属性，则此操作无效。如果使用该属性，则此操作无效。在这种情况下，

var idx=$（'.myli'）.index（）-$（'.myli'）.parent（）.attr（'start'）谢谢，但我不打算使用JQuery。传统的方法是使用ID？嗯。。。不，对不起，我这么认为是因为我看到的大多数代码似乎都使用了这种方法。但我必须承认，我的需求与那些代码实现的有点不同。
以前的同级
也将获取文本节点（LI元素之间的空白）。他是对的！我一开始就发现了这个问题。但是这很容易理解。+1@ŠimeVidas比我拥有的更短、更多的技巧，lolI猜想我将只使用以前的同级方法，因为预期列表项的数量是数百个，通过getElementsByTagName获取所有元素（如其他答案中所建议的）将效率低下（如果我错了，请纠正我）在速度和内存方面）。可惜没有直接的方法来获取索引号。我想既然他们已经有了这些数据，他们会提供的@是的，浏览器没有提供这个数字。但是，JavaScript库可以提供一个方便的函数来检索同级元素的索引。例如，我使用jQuery，它提供了一个
index（）
方法。我将用jQuery解决方案更新我的答案……好吧，我正在尽力避免使用jQuery，从而避免使用一个小脚本和另一层抽象。一方面，我对这个场景还不熟悉，希望了解它的实际工作原理，另一方面，我会有很多脚本，所以我尽量避免使用其他库。不过还是要谢谢你，一定要把它贴出来，其他人可能会觉得它很有用！
i = ol.start || 1;

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 );
};

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

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

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