Given an ordered HTML list, is there any way, given the list element, of determining it's number in JavaScript, besides looking at its location in the list?

For example, suppose I have a list

<ol start="4" type="i">
 <li>First</li>
 <li>Second</li>
</ol>

which is rendered as

iv. First
 v. Second

What is the best way using JavaScript (including jQuery) that, given on of the LI, to find out it's number?

The naive way is to look at the item's index, add the start value, and translate the type. But I am wondering if there's a better way.

Given an ordered HTML list, is there any way, given the list element, of determining it's number in JavaScript, besides looking at its location in the list?

For example, suppose I have a list

<ol start="4" type="i">
 <li>First</li>
 <li>Second</li>
</ol>

which is rendered as

iv. First
 v. Second

What is the best way using JavaScript (including jQuery) that, given on of the LI, to find out it's number?

The naive way is to look at the item's index, add the start value, and translate the type. But I am wondering if there's a better way.

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 3, 2011 at 6:26 RobRob 79155 silver badges2121 bronze badges 1

• you can use a loop to set an index – Ibu Commented Jun 3, 2011 at 6:28

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

an example is to add an index property to the list item:

lets say your list has an id='ordered'

var ol = document.getElementById('ordered');

// select the list items
var lists = ol.getElementsByTagName('li');

// now loop through the items and set a custom property 'index'
var l = lists.length; // total items

for (var i=1;i<=l;i++){
  list[i].index = i;
}

now your list item will have an index property that you can access through javascript to determine its position.

<ol id='ordered'>
 <li index='1'>First</li>
 <li index='2'>Second</li>
</ol>

Looking at http://www.w3/TR/html-markup/li.html I'd say using the value member.

note: this is in HTML5. in HTML4.01 both ol.start and li.value were deprecated. This means that this solution will probably work reliably only on browsers with HTML5 support.

The MDC documentation for the <li> element mentions the value attribute, which is supposed to do just that. It was deprecated in HTML 4 but has been reintroduced in HTML 5. If your browser supports it, you should be able to write:

$("li").prop("value");  // jQuery 1.6 and higher
$("li").attr("value");  // jQuery 1.5 and lower

I was, however, unable to use that attribute in Firefox 3.6 (it always returns -1). I created a fiddle if you want to test your browser's support for that feature.

Nice questions :)

I would say, better to inject data into each li elements, you could put some HTML attributes inside the li but I am afraid when you do HTML validation, it will reject it.

So this is the code,

var lis = $("ol li").each(function(i, el)
{
    $(this).data("index", i);
});

and when you render your lovely number, do this:

$(this).data("index");

:)