SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Getting the number of a numbered list item

    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:

    Code:
    <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:

    Code:
    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.:

    Code:
    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. #2
    SitePoint Addict bronze trophy
    Join Date
    Sep 2005
    Posts
    318
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Try innerHTML instead of value.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, but innerHTML returns the body of the list item rather than the number.

  4. #4
    SitePoint Enthusiast Belsnickle's Avatar
    Join Date
    Feb 2012
    Location
    Chico, CA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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

  6. #6
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    You could use the html collection returned by parentElement.children, and look for the id value in there: http://jsfiddle.net/nHvj3/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •