Use jQuery to number my lis?
<p>I'm trying to create a online version of the Yearbook Wall Ladder. 
<a href="http://jsfiddle.net/koalatea/7VDSV/2/" rel="nofollow">http://jsfiddle.net/koalatea/7VDSV/2/</a></p>

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

<pre><code>&lt;ul&gt;
    &lt;li compl="si"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/li&gt;
    &lt;li compl="si"&gt;&lt;span&gt;2-3&lt;/span&gt;&lt;/li&gt;
    &lt;li compl="no"&gt;&lt;span&gt;4-5&lt;/span&gt;&lt;/li&gt;
    &lt;li compl="no"&gt;&lt;span&gt;6-7&lt;/span&gt;&lt;/li&gt;
    &lt;li compl="no"&gt;&lt;span&gt;8-9&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And so on..</p>

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