嵌套有序列表答案

【问题标题】：Nested ordered lists嵌套有序列表
【发布时间】：2009-12-05 17:30:21
【问题描述】：

我需要一个带有子项编号的嵌套列表，如下所示：

1. Item 1
  1.1 - Subitem 1
  1.2 - Subitem 2
  1.3 - Subitem 3
  1.4 - Subitem 4
  1.5 - Subitem 5
2. Item 2
  2.1 - Subitem 1
  2.2 - Subitem 2
  2.3 - Subitem 3
  2.4 - Subitem 4
  2.5 - Subitem 5

好吧，我知道我无法使用纯 HTML 来实现这一点。使用这样的东西并让子列表自动编号会很棒：

<ol>
<li>
   Item 1
   <ol>
     <li>Subitem 1</li>
     <li>Subitem 2</li>
     <li>Subitem 3</li>
     <li>Subitem 4</li>
     <li>Subitem 5</li>
   </ol>
</li>
<li>
   Item 2
   <ol>
     <li>Subitem 1</li>
     <li>Subitem 2</li>
     <li>Subitem 3</li>
     <li>Subitem 4</li>
     <li>Subitem 5</li>
   </ol>
</li>
</ol>

有没有使用 JavaScript 或 jQuery 之类的解决方案？

【问题讨论】：

虽然您无法像使用纯 HTML 描述的那样获得“点状分层编号”，但您可以更改每个级别的编号样式（数字、大写字母、小写字母、希腊符号等）。根据您的需要，这可能已经足够了。
谢谢，darkporter，我知道，但我真正需要的是带有其父编号和点分隔符的子编号列表。阿布拉索斯。

标签： javascript jquery html html-lists sublist

【解决方案1】：

您可以使用 CSS 来做到这一点：

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". - "; counter-increment: item }
LI LI:before { content: counters(item, ".") " - "; counter-increment: item }

但它需要支持counter and counters。

编辑这是一个类似于 dcneiner 的 jQuery 方法，但没有深度限制：

function foo($ol, counters) {
    counters = counters || [];
    $ol.each(function(i) {
        var $this = $(this);
        $this.children("li").each(function(i) {
            var $this = $(this);
            $this.prepend(counters.concat([i+1]).join(".") + " ");
            $this.children("ol").each(function(j) {
                foo($(this), counters.concat([i+1]));
            });
        });
    });
}
foo($("ol:not(li > ol)"));

【讨论】：

谢谢！由于跨浏览器兼容性，我选择了上面的那个。谢谢。
就像重构...我现在要尝试重写你的...你给了我一个想法...
好的，把你的代码的基本思想（喜欢concat复制数组并添加数字！），把它变成一个jQuery插件。它现在在我的回答中。感谢您抽出宝贵时间改进此功能！
@Marcos Buarque：我不明白为什么他的第一个版本会比我的更兼容浏览器。
哎呀，你第一次发帖，纯CSS。我错了吗？无论如何，感谢您的所有帮助...

【解决方案2】：

如果你想用 jQuery 跨浏览器：

$("ol#list ol").each(function(i, el){
   $(this).children().each(function(ci,cel){
      $(this).prepend('<span class="pseudo-num">' + [i + 1, ci + 1].join('.') + ' </span>');
   });
}).addClass('pseudo-processed');

在你的 CSS 中：

ol .pseudo-num { display: none }
ol.pseudo-processed { list-style: none; padding-left: 0 }
ol.pseudo-processed .pseudo-num { display: inline; font-weight: bold }

这仅适用于一个级别。您可以更改代码以创建多个级别的递归函数。

这是为了逐步增强您的页面而设置的。如果没有 Javascript，它将回退到正常的嵌套编号。

更新：感谢 @Gumbo 的工作，我将这段代码重新编写成一个递归插件。它将使用与我之前示例中相同的 CSS，但现在它是一个“成熟”的 jQuery 插件，支持任何深度：

$.fn.outline = function(options, counters){
    var options  = $.extend({}, $.fn.outline.defaults, options),
        counters = counters || [];

    this.each(function(){
       $(this).children('li').each(function(i){
           var ct = counters.concat([i + 1]);
           if(counters.length){
             $('<span></span>')
                .addClass(options.numberClass)
                .text(ct.join('.') + ' ')
                .prependTo(this);
           }
           $(this).children('ol').outline(options, ct);
       })
    });

    if(!counters.length) this.addClass(options.processedClass)
}

$.fn.outline.defaults = {
       numberClass: 'pseudo-num',
    processedClass: 'pseudo-processed'
}

然后您可以在特定的#id 上调用它：

 $("#list").outline();

或者使用@Gumbo 的不错的选择器将其应用于一页上的所有ol 标签：

 $("ol:not(li > ol)").outline();

您可以全局覆盖默认值，也可以单独覆盖：

 $.fn.outline.defaults.processedClass = 'ol-ready';
 // or
 $("#list").outline({processedClass: 'ol-ready'});

【讨论】：

嘿，谢谢，这确实有效！ javascript解决方案还是比较好，因为浏览器不支持纯css解决方案。
嘿，谢谢，这真的很有帮助（重写了多深度代码）。我想知道其他网站管理员是否对这种列表有同样的需求……我相信是的。阿布拉索斯。

【解决方案3】：

既不是 js 也不是 jquery，而是 CSS：

<STYLE type="text/css">
    UL, OL { counter-reset: item }
    LI { display: block }
    LI:before { content: counters(item, "."); counter-increment: item }
</STYLE>

【讨论】：