嵌套<ol> - 显示结构化列表的完整路径？

Question

我有许多HTML文档包含合法信息,每个文档都是一个嵌套的有序列表,在字母和数字之间交替.例如:

<ol type="1">
  <li>First</li>
  <li>Second
    <ol type="a">
      <li>Third</li>
      <li>Fourth
        <ol type="1">
          <li>Fifth</li>
        </ol>
      </li>
      <li>Sixth</li>
    </ol>
  </li>
  <li>Seventh</li>
</ol>

我想使用CSS或jQuery来显示每个列表项的完整路径 - 所以上面的列表将导致:

1) First
2) Second
  2.a) Third
  2.b) Fourth
    2.b.1) Fifth
  2.c) Sixth
3) Seventh

我知道可以在CSS中使用计数器来处理数字,但有没有办法用字母来做呢？

Answer 1

如何添加索引的小jQuery:

var letters = 'abcdefghijklmnopqrstuvwxyz';
$('li').each(function (i, ele) {
    $('<span />', {html : (function() {
        return $(ele).parents('li').addBack().map(function (_, a) {
                 return isNaN( $(a).parent('ol').attr('type') ) ? 
                        letters[$(a).index()] : $(a).index() + 1;
                }).get().join('.') + ')&nbsp;';
     }())}).prependTo(ele);
});

小提琴