CODEWITHSUNDEEP
javascripthtmlhtml-lists
Diff.Thinkr
Diff.Thinkr

Reputation: 855

Ordered List Index

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.

Upvotes: 8

Views: 9843

Answers (5)

Šime Vidas
Šime Vidas

Reputation: 185963

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/

Upvotes: 8

KJYe.Name
KJYe.Name

Reputation: 17169

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

Upvotes: 0

kennebec
kennebec

Reputation: 104800

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

Upvotes: 0

DhruvPathak
DhruvPathak

Reputation: 43245

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

Upvotes: 1

beeglebug
beeglebug

Reputation: 3552

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

Upvotes: 6

Related Questions