有序列表倒序排列编号

Question

我希望有序列表的编号按照降序排列。示例演示在此处：

演示

但是，我不想让计数器跨越多个ol，而是希望每个ol后都重置计数器。因此，演示的期望结果应为：

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

[2] 4
[1] 5

有没有人有想法如何修改现场演示的代码（或知道大多数浏览器支持的更好的解决方案）以实现上述行为？

另外，是否有办法使 [ ] “可复制”，以便在 Word 文档或任何开源替代品中进行复制粘贴？因为对于上面的示例，它仅解释数字，而不包括方括号。

- AMayer

Answer 1

您需要为每个ol设置counter-reset值，该值等于子元素数量+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>

- Bhuwan

---

这正是我想要的。关于 [ ]，有没有办法使它们可复制到文档中？我考虑制作一个带有功能的按钮，可以打开另一个窗口，其中包含 ol 的打印版本，以便更轻松地复制粘贴网站上的信息。这是正确的方法吗？ - AMayer

你是如何复制这些东西的？ - Bhuwan

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 更新-基于@Bhuwan Bhatt的好答案-我添加了一个仅使用JavaScript的版本，通过querySelectorAll设置计数器-两次使用-首先获取文档中的所有ols，然后在每个ol中获取该ol的li数量。

然后只需将计数器设置为li的长度（加1是因为li的零索引），即可。

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>

- gavgrif

---

谢谢！问题在于我不想担心保持列表长度的记录，因为我会有许多具有数百个项目的有序列表。这就是为什么我希望能够自动计算它们的数量。 - AMayer

嗨@AMayer - 在CSS计数器上做一些研究吧 - 它们非常棒...你可以设置每个ol重新开始计数...并且你可以为不同的列表设置不同的计数和显示方式。所以你肯定可以按照自己的想法来构建它们...https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters - gavgrif

我明白了，但是要使用它，我需要知道列表中有多少个元素，例如（counter-reset: section 4）。我试图避免这样做，因为我有许多不同长度的列表需要处理，所以每次添加另一个项目到列表中时更新代码会非常困难。 - AMayer

Answer 3

这里提供了另一种解决方案，依赖于flex和column direction的column-reverse值。该值将允许您反转列表，从而反转数字，但这也会反转数据，因此您可以添加一小段jQuery代码将它们恢复到初始顺序：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class="reverse">
  <li>aa</li>
  <li>ab</li>
  <li>ac</li>
</ol>

<ol class="reverse">
  <li>a</li>
  <li>bb</li>
  <li>cccc</li>
  <li>ddddd</li>
</ol>


<ol>
  <li>a</li>
  <li>bb</li>
  <li>cccc</li>
  <li>ddddd</li>
</ol>

- Temani Afif