Question

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

但是，我希望计数器在每个ol之后重置，而不是让计数器跨越多个ol。

因此，现场演示的理想结果是：

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

[2] 4
[1] 5

有没有人知道如何修改现场演示中的代码（或者知道大多数浏览器支持的更好的解决方案）才能产生上述行为？

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

Answer 1

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

＆＃13;

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));
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用CSS计数器来实现这一目标。请注意，我将一个：before伪元素应用于显示计数的li。

请注意，计数器重置设置在ol元素上 - 这意味着计数将在每个ol实例中重新显示，因此您不需要跟踪您拥有的列表数量或每个列表的li数量。您也可以将其设置为计算li的嵌套列表，并将其显示为1.1,1.2等。

您可以将计数设置为在每个ol上重新开始....您可以为不同的列表设置不同的计数和显示。所以你绝对可以按照你想要的方式构建它们...... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

UPDATE - 基于@Bhuwan Bhatt的精彩答案 - 我通过querySelectorAll在计数器上添加了一个javascript版本的设置 - 使用了两次 - 首先获取文档中的所有ols然后在每个ol中获取那个人的李的数量。

然后简单地将计数器设置为li的长度（由于li的零指数化而+1）

var lists = document.querySelectorAll('ol');
var listsLength = lists.length;

for(i=0;i<listsLength;i++) {
 var lis= lists[i].querySelectorAll('li');
 var lisLength = lis.length +1;
 lists[i].style.counterReset= 'section '+ lisLength;
}

ol {
  list-style:none;
  padding-left:0;
  counter-reset: section ; /* Creates a new instance of the
                                section counter with each ul
                                 element - count set to 4 
                                 because of zero indexing of the list */
}

li::before {
  counter-increment: section -1;   /* Using a negative number 
                                    to decrement the count */
  
  content: counter(section);  /* Display the count as :before element */
  margin-right:15px;  /* provide a margin between the ount and the li */
}

<ol>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
 </ol>
 
 <ol>
  <li>test 1</li>
  <li>test 2</li>
  <li>test 3</li>
  <li>test 3</li>
 </ol>
 
 <ol>
  <li>test 1</li>
  <li>test 2</li>
 </ol>

Answer 3

这是另一种依赖于列方向的flex和AND EXTRACT(YEAR FROM PERFORMED_DATE_TIME) = 2017值的解决方案。此值将允许您反转列表，从而反转数字，但这也将反转数据，因此您可以添加一个小的jQuery代码，使它们恢复到初始顺序：

＆＃13;

column-reverse

＆＃13;

$('ol.reverse').each(function() {
  $(this).append($(this).children('li').get().reverse());
})

＆＃13;

ol.reverse {
  display: flex;
  flex-direction: column-reverse;
}

＆＃13;

反转有序列表的编号顺序

3 个答案: