我有一个嵌套的有序列表。
<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>
当前,嵌套元素再次从1开始,例如
我想要的是第二个元素的编号,如下所示:
2.1。第二个嵌套的第一个元素
2.2。第二个嵌套的第二个元素
2.3。第二个嵌套的第三个元素
有办法吗?
这是一个适用于所有浏览器的示例。纯CSS方法可在实际的浏览器中使用(即,除了IE6/7之外的所有内容),而jQuery代码将覆盖不受支持的代码。它具有SSCCE的风格,您无需更改即可复制’n’paste’n’run。
<!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>