Question

我正在尝试使用JQuery创建自动编号OL列表。我想创建列表喜欢这个

苹果

1.1青苹果

1.2红苹果

1.3红苹果
橙

2.1橙汁

2.2等

请帮我创建这个）

   $('#content-main-text ol:first-child li').each(function(index) {
     $(this).html((index + 1) + '. ' + $(this).html());
   });

此代码为我的列表中的所有LI添加了数字...

Answer 1

我虽然很容易找到一个css属性来提供你想要的功能，但我找不到任何东西。这就是你用jQuery做的事情（但它有一些问题）：

function fn(li,parentPrefix) {
    $(li).children("li").each( function(index) {
        var i = index + 1;
        var myPrefix = parentPrefix ? parentPrefix + "." + i : i;
        $(this).html(myPrefix + " " + $(this).html());
        fn( $(this).children("ol"), myPrefix);
    });
}

var topmostOLs = $("ol").filter(function() { return !$(this).parent().is("li") } )
topmostOLs.each(function() {
    fn(this);
});

它找到所有最顶层的ol元素，并递归访问其子列表以添加编号。

为了正确显示，您必须添加css ol { list-style: none }以删除本机css编号。

这样做的一个问题是，如果您标记列表并将其复制，它将复制添加的编号和ol的原生编号。

以下是演示：http://jsbin.com/utuci3/edit（按左上方的preview查看结果）

Jquery OL自动编号

1 个答案: