Question

我需要制作一个jquery脚本，它可以正确启动OL并将其转换为基于CSS的计数器。所以对于像这样的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});    

});

index var正在运行，但我不知道如何在css属性中插入它。谢谢您的帮助，泽索特

Answer 1

我们用JS做这个，因为周围的CSS隐藏了默认编号。我们有一个提供开始属性的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/

ol list counter使用jquery基于start属性重置

1 个答案: