Ordered List Index

Question

Is there any way to get the number (index) of a li tag in an ordered list?

I'm trying to get the number that is shown on the side (the list numbering). I know that the traditional way is to use an id which stores the line number but this would mean that if a line is added in between, a lot of ids would have to be edited. Even though I have developed an algorithm for this, it is not so efficient.

I'm looking for a solution to use in Javascript.

Answer 1

You can use previousElementSibling to jump step-by-step to the beginning of the list and just count how many jumps you made:

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

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

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

Note that Element Traversal is not implemented in IE8 or below (but it is in IE9).

Live demo: http://jsfiddle.net/simevidas/U47wL/

---

If you have the start attribute set on the OL element, then just modify the line where i is declared do this:

i = ol.start || 1;

Live demo: http://jsfiddle.net/simevidas/U47wL/2/

---

If you require a cross-browser solution, then you can use previousSibling and then check whether the sibling is an element node and only increment then:

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

Live demo: http://jsfiddle.net/simevidas/U47wL/4/

---

jQuery solution:

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

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

Live demo: http://jsfiddle.net/simevidas/U47wL/5/

Answer 2

jQuery has an .index() function which returns the position of the element within it's parent. That should do what you are asking for, as long as you are happy using jQuery.

For example, given the following HTML:

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

The following javascript should return 1 (index starts from 0)

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

Answer 3

you can try getElementsByTagName in the parent of your li elements and traverse them, and increase the index,getElementsByTagNames results in same order as they appear in DOM tree. See this for example : 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

// Not especially for lists, but this is a way to get the index of an element within its parent, from the element itself. It won't count any decendents of siblings, just siblings with the same tag.

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

Answer 5

This is one way to do it JSFiddle Demo:

By clicking on the li node it'll console.log the index number

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