如何获取元素的顺序号

Question

如何通过JavaScript/jQuery获取某个元素的顺序号码？

<ul>
 <li>Anton</li>
 <li class="abc">Victor</li>
 <li class="abc">Simon</li>
 <li>Adam</li>
 <li>Peter</li>
 <li class="abc">Tom</li>
</ul>

有一个类名为abc的3xli元素。现在我需要获取Simon li的排序号码（sequence number）。

先行致谢。

- user270158

Answer 1

使用Jquery的index()方法

- Sarfraz

Answer 2

您可以使用带有.index()选择器的方法来实现此操作，例如：

$('li:contains(Simon)').index('.abc'); //returns 1, it's 0 based
//Or this...
$('li').filter(':contains(Simon)').index('.abc'); //returns 1

如果没有选择器，你会得到2，即父元素中

的索引，不考虑类别。 你可以在这里查看一个快速演示。请记住，它是从0开始计数的索引，在某些情况下需要将结果+1以显示，具体取决于你所需的内容。

- Nick Craver

Answer 3

如果您喜欢使用You Might Not Need Jquery的方法，这里是实现步骤：

function index(el) {
    if (!el) return -1;
    var i = 0;
    do {
        i++;
    } while (el = el.previousElementSibling);
    return i;
}

IE8及以下版本：

function index(el) {
    if (!el) return -1;
    var i = 0;
    do {
        if (el.nodeType === 1) i++;
    } while (el = el.previousSibling)
    return i;
}

- extempl

Answer 4

这是针对@Nick Craver答案的修复。我尝试使用.index('.class_name')，但它一直返回未找到的-1。然后我尝试了.index( $('.class_name') )，这给了我预期的结果。我猜它需要一个dom节点对象作为它的值，而不仅仅是一个选择器。

- Morgan Wilde