嵌套的有序列表

问题描述

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

  1。项目1 
 1.1  - 子项目1 
 1.2  - 子项目2 
 1.3  - 子项目3 
 1.4  - 子项目4 
 1.5  - 子项目5 
 2.项目2 
 2.1  - 子项目1 
 2.2  - 子项目2 
 2.3  - 子项目3 
 2.4  - 子项目4 
 2.5  - 子项目5 
  

嗯，我知道我无法通过纯HTML实现这一目标。使用类似这样的东西并使子列表自动编号会很棒：

 < ol> 
< li> 
项目1 
 
 
< li>子项目1< / li> 
< li>子项目2< / li> 
< li>子项目3< / li> 
< li>子项目4< / li> 
< li>子项目5< / li> 
< / ol> 
< / li> 
< li> 
第2项
< ol> 
< li>子项目1< / li> 
< li>子项目2< / li> 
< li>子项目3< / li> 
< li>子项目4< / li> 
< li>子项目5< / li> 
< / ol> 
< / li> 
< / ol> 
  

是否有使用JavaScript或jQuery的解决方案？

解决方案

如果你想用jQuery跨浏览器来做：

 <$ c （函数（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，它会回退到正常的嵌套编号。

$ b

更新：感谢 @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（如果（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 中调用它：

  $（ ＃列表）纲要（）。 
  

或者使用@Gumbo的好选择器将它应用于所有 ol 在一页上的标签：

  $（ol：not（li> ol））。outline ）; 
  

您可以覆盖全局默认值或个别基准：

  $ .fn.outline.defaults.processedClass ='ol-ready'; 
 //或
 $（＃list）。outline（{processedClass：'ol-ready'}）; 
  

I need a nested list with subitem numbering, like this:

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

Well, I know I cannot achieve that with pure HTML. It would be great to use something like this and have the sublist automatically numbered:

<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>

Is there a solution for this using JavaScript or jQuery or something?

解决方案

If you want to do it cross-browser with 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');

And in your 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 }

This is for one level only. You could alter the code to create a recursive function for multiple levels.

This is setup to progressively enhance your page. Without Javascript it would fallback to normal nested numbering.

UPDATE: Thanks to @Gumbo work, I reworked this code into a recursive plugin. It would use the same CSS as in my previous example, but now it is a "full fledged" jQuery plugin with support for any depth:

$.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'
}

You could then call it on a specific #id:

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

Or use @Gumbo's nice selector to apply it to all ol tags on one page:

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

And you can either override the defaults globally, or on an individual basis:

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

这篇关于嵌套的有序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！