ol 列表计数器重置基于使用 jquery 的 start 属性

Question

我需要制作一个能够正确启动 OL 并将其转换为基于 css 的计数器的 jquery 脚本。 所以对于这样的html：

<ol >
  <li>First</li>
  <li>Second</li>
</ol>
<p></p>
<ol start ="3" >
  <li>First</li>
  <li>Second</li>
</ol>

应该使用 css 从第二个列表上的 3 开始编号

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

我想根据 start 属性自动添加计数器重置。 到目前为止我得到的是：

$("ol").each(function() {

  var index = $("ol").prop("start")-1;
  $(this).css({counter-reset:list index});    

});

索引变量正在工作，但我不知道如何将它插入到 css 属性中。 谢谢您的帮助， Zsolt

Answer 1

我们使用 JS 执行此操作是因为周围的 CSS 隐藏了默认编号。我们有一个提供 start 属性的 CMS：

如果你确实想用 JS 来做，我建议：

<ol >
  <li>First</li>
  <li>Second</li>
</ol>
<p></p>
<ol start="3" >
  <li>First</li>
  <li>Second</li>
</ol>

然后这个 CSS 将使用 :before 重新创建编号

ol {
    counter-reset: li
}

li {
    list-style-type: none;
    counter-increment:li;
}

li:before {
    content:" " counter(li) ". ";
}

然后这个 JS 将结合你的样式应用 start 属性：

$("ol").each(function(idx, el) {
  var index = parseInt($(el).attr("start"))-1;
    if (!isNaN(index)) {
        $(el).css({'counter-reset':'li ' + index});    
    }
});

如这里所示...

http://jsfiddle.net/sifriday/vt2nconp/2/