Hey!
The website I'm currently developing has a three-level menu and each item in the menu must have a number before the title: 1. and 1.1. and 1.1.1. for example. Currently I am using CSS to generate the numbers:
#menu ol { counter-reset: item; }
#menu li a { counter-increment: item; }
#menu li a:before { content: counters(item, ".") ". "; }
But all this, of course, doesn't work in IE7, so I need an alternative to automatically generate the numbers. Can't use server-side scripting because it's an offline application so I thought this can be done with Javascript/jQuery, but I am lacking JS skills to do that.
The menu structure looks like this (all inside div#menu):
<ol>
<li>
<a>Level 1 title</a>
<ol>
<li>
<a>Level 2 title</a>
<ol>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
</ol>
</li>
<li>
<a>Level 2 title</a>
<ol>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
</ol>
</li>
</ol>
</li>
<li>
<a>Level 1 title</a>
<ol>
<li>
<a>Level 2 title</a>
<ol>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
</ol>
</li>
<li>
<a>Level 2 title</a>
<ol>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
<li><a>Level 3 title</a></li>
</ol>
</li>
</ol>
</li>
</ol>
I would really like to not change the structure. Can anyone show me how to automatically generate list numbers with Javascript?