Getting the number of a numbered list item

JavaScript
1

I’m trying to write a JavaScript function that will let me refer to a numbered list item by number. (I know this code is available on the Web, but I want to write my own as a learning exercise.)

For example, if I have a list like this:

<ol>
   <li>One</li>
   <li id='L2'>Two</li>
   <li>Three</li>
</ol>

I want to be able to write a reference something like this:

Look at list item <span onload="olRef('L2')">xxx</span> and

…and have it display this:

Look at list item 2 and

To make this work I need a way of getting the number of the list item. I’ve seen examples that do it with the span element’s value property, i.e.:

var number = document.getElementById('L2').value

but that isn’t working for me. The value of .value is 0 (zero), and I don’t see another property of the li object that contains its number. How do I do this?

2

Try innerHTML instead of value.

3

Thank you, but innerHTML returns the body of the list item rather than the number.

4

Value is trying to call the value attribute which your item doesn’t have. What you want is index(), were you using jQuery

var index = $( “#L2” ).index();

It’s 0 based like arrays so your second element would be location 1 you can essentially just add 1 and you’ll get the expected common numerical point.

Alternatively you could also try something like this which is all vanilla javascript:


olRef( setID )
{
    var elem = document.getElementById('parentElementID')
    var elements = elem.getElementsByTagName('li');
    var stop = false;
    var count = '0';
    for(var i=0;stop==true; i++) 
    {
        var input = elements[i] ;
        if( input[i].id ==  setID)
        {
            stop = true;
            count = i;
        }
        elseif ( i == elements.length )
        {
            input[i].id != setID;
            stop = true;
            count = null;
        }
    }
}

Basically it’s counting elements with the specific element tag within the dom element ID you’re adding to elem then iterating through the elements it returned one by one until it either hits the total number of elements at that dom level, it then stops if it finds a match or reaches the last element in the dom level then if the last element isn’t a match it sets the count to null so that it’ll throw an exception or can be checked as !count on reference. Ideally I’d recommend the jquery though since it’s designed specifically for this and is likely more efficient in addition to being a dozen or so fewer lines of code.

5

I found a solution for this, and (I think) an answer. The answer is that the DOM has no property that contains the number of a numbered list item. The solution is to count back from the current list item to the start of the list and add one. Here’s the code I wrote:

      var source = document.getElementById(s);
      var ndx = 1;
      while ( ( source = source.previousElementSibling ) ) {
         ++ndx;
      }
      target.appendChild( document.createTextNode(ndx) );
6

You could use the html collection returned by parentElement.children, and look for the id value in there: http://jsfiddle.net/nHvj3/