Use jQuery to number my lis?

I'm trying to create a online version of the Yearbook Wall Ladder. http://jsfiddle.net/koalatea/7VDSV/2/

As of now, I'm numbering each li individually. The numbers represent each page of the book.

<ul>
    <li compl="si"><span>1</span></li>
    &开发者_如何学Clt;li compl="si"><span>2-3</span></li>
    <li compl="no"><span>4-5</span></li>
    <li compl="no"><span>6-7</span></li>
    <li compl="no"><span>8-9</span></li>
</ul>

And so on..

Can I use jQuery to number them for me? Also, any advice to make clean up my code?

Something like this should do:

$('span').each(function(index) { 
  if(index == 0) {
    $(this).html(1);   
  } else {
    var n = (index)*2;
    $(this).html(n + '-' + (n+1));
  }
});

Obviously this would fall on its head if you introduced more span elements. This is only to show how you could fill in the values. Also, I would question the need for your span elements.