CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AMayer
AMayer

Reputation: 425

Reverse the numbering order for ordered lists

I would like to have the numbering of the ordered list in descending order. live example here:

demo

But instead of having the counte span multiple ol, I would like the counter to reset after each ol.

So, the desired result for the live demo would be:

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

[2] 4
[1] 5

Does anyone have an idea how to modify the code from the live demo (or know a better solution that is supported by most browsers) to have the above behavior?

Also, is there a way to make the [ ] "copyable" with copy-paste to Word docs or any open source alternative? Because for the above example it interprets only the numbers without the square parenthesis.

Upvotes: 5

Views: 569

Answers (3)

Temani Afif
Temani Afif

Reputation: 272807

Here is another solution that rely on flex and column-reverse value of column direction. This value will allow you to reverse the list and thus reverse the number but this will also reverse the data, so you can add a small jQuery code to put them back to initial order:

$('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>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15499

You can use CSS counters to achieve that. Note that I am applying a :before pseudo-element to the li which displays the count.

Note the counter reset is set onto the ol element - that mean the count will resent with each instance of an ol so you don't need to bkeep track of the number of lists you have or the number of li's each list has. You can alse set it to count nested lists wiithin the li's as well and display those as 1.1, 1.2 etc.

You can set the count to start again on each ol.... and you can have different counts and displays for different lists. So you can definitely structure them how you want.... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

UPDATE - based on the nice answer from @Bhuwan Bhatt - I have added a javascript only version of the setting on the counter via querySelectorAll - used twice - first to get all the ols in the document and then within each ol to get the number of li's of that ol.

Then simply setting the counter to the lengt of the li's (+1 to due to the zero indexation of the li's)

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>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

You have to set the counter-reset value for each ol is equal to the 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>

Upvotes: 2

Related Questions