如果你想用 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'});