CODEWITHSUNDEEP
jqueryhtmlcss
Mike Thomsen
Mike Thomsen

Reputation: 37526

How can I change the numbering of an order list's items?

We have a simple AJAX application that pings a web service and populates an ordered list element with <li/> elements from its results. Each time the operation is started, it clears out the existing <li/> elements and repopulates the ordered list.

I've seen various tutorials on css counter operations, but I can't seem to make it work. I think it's because we're clearing the ordered list each time. Can someone give me an idea about how to manually set the list item numbers?

Upvotes: 3

Views: 272

Answers (2)

Jason Gennaro
Jason Gennaro

Reputation: 34863

Not sure if this works for your code, but here's a way to do it with CSS and counter-reset

HTML

<ol id="one">
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>

<ol id="two">
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>    
</ol>

CSS

#one{
    counter-reset:item;
}
#two{
    counter-reset:item 10; 
}
li:before {
    content: counter(item) ". ";
    counter-increment: item;
}

Example: http://jsfiddle.net/jasongennaro/WWtFY/

Upvotes: 1

Tomas Aschan
Tomas Aschan

Reputation: 60664

Set value="yournumber" on the list items. From W3C:

<ol>
  <li value="30"> makes this list item number 30.
  <li value="40"> makes this list item number 40.
  <li> makes this list item number 41.
</ol>

Upvotes: 3

Related Questions