反转有序列表的编号顺序

Question

我想按降序排列有序列表的编号.这里的实例:

演示

但是,我希望计数器在每个ol之后重置,而不是让对手跨越多个ol.

因此,现场演示的理想结果是:

[3] 1
[2] 2
[1] 3

[2] 4
[1] 5

有没有人知道如何修改现场演示中的代码(或者知道大多数浏览器支持的更好的解决方案)以具有上述行为？

另外,有没有办法使[]"可复制"复制粘贴到Word文档或任何开源替代？因为对于上面的例子,它只解释没有方括号的数字.

Answer 1

您必须将counter-reset每个值设置ol为等于number of child + 1

var ol_elements = document.getElementsByTagName("ol");
//console.log(ol_elements[0].children.length)
for (var i = 0; i < ol_elements.length; i++) {
  ol_elements[i].setAttribute('style', 'counter-reset: item ' + (ol_elements[i].children.length + 1));
}

body {
  font: 13px Verdana
}

ol {
  list-style-type: none;
  margin-left: 20px;
  padding: 0px;
}

ol>li {
  counter-increment: item -1;
}

ol>li:before {
  content: "[" counter(item) "]";
  padding-right: 10px;
}

<div id="content">
  <ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ol>
  <ol>
    <li>4</li>
    <li>5</li>
  </ol>
  <ol>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ol>
</div>