Menu
I have a nested ordered list.
<ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested secondelement</li> <li>second nested thirdelement</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> Currently the nested elements start back from 1 again, e.g.
What I want is for the second element to be numbered like this:
second
2.1. second nested first element
2.2. second nested second element
2.3. second nested third element
Is there a way of doing this?
489
To create ordered list in HTML, use the <ol> tag. Ordered list starts with the <ol> tag. The list item starts with the <li> tag and will be marked as numbers, lowercase letters uppercase letters, roman letters, etc. The default numbers for list items.
In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements <ol> and <ol /> , we have to define the list items. We can define the list items using the <li> tag.
Here's an example which works in all browsers. The pure CSS approach works in the real browsers (i.e. everything but IE6/7) and the jQuery code is to cover the unsupported. It's in flavor of an SSCCE, you can just copy'n'paste'n'run it without changes.
<!doctype html> <html lang="en"> <head> <title>SO question 2729927</title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function() { if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */ $('ol ol').each(function(i, ol) { ol = $(ol); var level1 = ol.closest('li').index() + 1; ol.children('li').each(function(i, li) { li = $(li); var level2 = level1 + '.' + (li.index() + 1); li.prepend('<span>' + level2 + '</span>'); }); }); } }); </script> <style> html>/**/body ol { /* Won't be interpreted by IE6/7. */ list-style-type: none; counter-reset: level1; } ol li:before { content: counter(level1) ". "; counter-increment: level1; } ol li ol { list-style-type: none; counter-reset: level2; } ol li ol li:before { content: counter(level1) "." counter(level2) " "; counter-increment: level2; } ol li span { /* For IE6/7. */ margin: 0 5px 0 -25px; } </style> </head> <body> <ol> <li>first</li> <li>second <ol> <li>second nested first element</li> <li>second nested second element</li> <li>second nested third element</li> </ol> </li> <li>third</li> <li>fourth</li> </ol> </body> </html> I know it is late to reply, but I just found an example of doing that using CSS. Add this to you CSS section (or file):
ol.nested { counter-reset: item } li.nested { display: block } li.nested:before { content: counters(item, ".") ". "; counter-increment: item } Here is an example of how your list code would look like:
<ol class="nested"> <li class="nested">item 1</li> <li class="nested">item 2 <ol class="nested"> <li class="nested">subitem 1</li> <li class="nested">subitem 2</li> </ol></li> <li class="nested">item 3</li> </ol> HTH
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
