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);
});

FIDDLE

Answer 2

以下是使用标准CSS 2.1进行此操作的一种方法。

HTML与你的类似，只是为了方便我定义了一些类：

<ol class="level-1" type="1">
    <li>First</li>
    <li>Second
        <ol class="level-2" type="a">
            <li>Third</li>
            <li>Fourth
                <ol class="level-3" type="1">
                    <li>Fifth</li>
                </ol>
            </li>
            <li>Sixth</li>
        </ol>
    </li>
    <li>Seventh</li>
</ol>

对于CSS，我定义了3个自定义计数器（cnt-1，cnt-2，cnt-3）并使用内容用于显示自定义格式标签的属性：

ol.level-1 {
    counter-reset: cnt-1;
    list-style: none;
}
ol.level-1 li:before {
    content: counter(cnt-1)".";
    counter-increment: cnt-1
}
ol.level-2 {
    counter-reset: cnt-2;
    list-style: none;
}
ol.level-2 li:before {
    content: counter(cnt-1)"."counter(cnt-2,lower-alpha);
    counter-increment: cnt-2
}
ol.level-3 {
    counter-reset: cnt-3;
    list-style: none;
}
ol.level-3 li:before {
    content: counter(cnt-1)"."counter(cnt-2,lower-alpha)"."counter(cnt-3);
    counter-increment: cnt-3
}

ol li:before {
    display: inline-block;
    margin-right: 5px;
}

您可以在http://jsfiddle.net/audetwebdesign/TJYVf/

看到该演示

带边距和填充的确切样式将取决于您的特定布局需求，但此演示说明了这一概念。

Answer 3

不完全是你的追求，但接近。试试这个：

<style>
    ol { list-style-type:upper-latin; }
</style>

这会将您的索引项标签打印为字母。

如果您想要“1a ... 2a ... 2a.a”这样的东西，您必须使用javascript /服务器端代码以编程方式在循环中构建列表。

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

3 个答案: