html带数字列表,jquery – HTML中的数字嵌套排序列表

本文介绍了一种使用纯CSS及jQuery实现嵌套有序列表自动编号的方法。通过此方法,可以确保二级列表项从父级列表项的编号下开始计数,如“2.1”、“2.2”。此方案兼容主流浏览器,并提供了一个可以直接复制运行的示例。

我有一个嵌套的有序列表。

  1. first
  2. second
    1. second nested first element
    2. second nested secondelement
    3. second nested thirdelement
  3. third
  4. fourth

当前,嵌套元素从1开始再次返回,例如。

>第一

>第二

>第二个嵌套的第一个元素

>第二个嵌套的第二个元素

>第二个嵌套的第三个元素

>第三

>第四

我想要的是第二个元素编号如下:

>第一

>第二

2.1。第二嵌套第一元素

2.2。第二嵌套第二元素

2.3。第二嵌套第三元素

>第三

>第四

有没有办法做到这一点?

这里有一个在所有浏览器中都有效的示例。纯CSS方法适用于实际的浏览器(即IE6 / 7以外的所有内容),

jQuery代码覆盖了不支持的。它在

SSCCE的味道,你可以只是copy’n’paste’nrrun没有改变。

SO question 2729927

$(document).ready(function() {

if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */

$('ol ol').each(function(i,ol) {

ol = $(ol);

var level1 = ol.closest('li').index() + 1;

ol.children('li').each(function(i,li) {

li = $(li);

var level2 = level1 + '.' + (li.index() + 1);

li.prepend('' + level2 + '');

});

});

}

});

html>/**/body ol { /* Won't be interpreted by IE6/7. */

list-style-type: none;

counter-reset: level1;

}

ol li:before {

content: counter(level1) ". ";

counter-increment: level1;

}

ol li ol {

list-style-type: none;

counter-reset: level2;

}

ol li ol li:before {

content: counter(level1) "." counter(level2) " ";

counter-increment: level2;

}

ol li span { /* For IE6/7. */

margin: 0 5px 0 -25px;

}

  1. first
  2. second
    1. second nested first element
    2. second nested second element
    3. second nested third element
  3. third
  4. fourth
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值