6

我有许多包含法律信息的 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 中使用计数器来处理数字，但是有没有办法用字母来做呢？

4

3 回答 3

5

用一点 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);
});

小提琴

于 2013-06-24T21:40:12.160 回答
4

这是使用标准 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）并使用 content 属性来显示自定义格式的标签：

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/

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

于 2013-06-24T21:46:08.387 回答
0

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

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

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

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

于 2013-06-24T21:19:22.157 回答