Reversed Ordered List with jQuery

At work this past week, a client requested something that I wasn’t sure how to achieve: a reversed ordered list. So basically, they wanted to have a top 10 list, with the first item being numbered 10 and the last 1.

If you want to skip ahead to the demo, go ahead.

View Demo

Now sure, I could have just written the numbers in as text, but it’s a list, and it’s ordered! Here is an example of what the client wanted:

10. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
9. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
8. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

After some digging around, I found out that you can add the value attribute to each list item to specify the number to display. So basically, I just needed to code my list like this:

 <li value="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li value="9">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li value="8">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li value="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

Pretty straightforward, but also pretty ugly. So what happens when the client decides they want to insert another bullet in the middle of the list? Yep, that’s right, they would have to adjust the numbering for the rest of the list.

Pretty crappy, so let’s use the powerfulness of jQuery to make this a little better.

The Markup

So just like before, we just want to create an ordered list, but this time, we will leave off the value attribute. We are also going to add a class to the ordered list that we will use as a hook to add in the jQuery functionality:

<ol class="reversed">
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>

The jQuery

Mapping out the code a bit: we want to select each element with a class of reversed, and count the total number of children list items. Then, we want to loop through the children, and update the value attribute to be the value of the total number of children minus a counter variable that we started at zero and increment each time through the loop.

That seems relatively straightforward, so I’ll just show the code that I wrote:

$(document).ready(function() {
 $('.reversed').each(function() {
  var $children = $(this).children('li');
  var totalChildren = $children.length;
  var start = 0;
  $children.each(function() {
   $(this).val(totalChildren - start);

View Demo

It looks like with HTML 5, we get a reversed attribute that accomplishes the same thing, but until it’s fully supported, this quick & easy solution seems to work.

On a Personal Note

I have been severely neglecting my blog, but for good reason. I have been teaching some intro to web development courses at CDIABU in Georgetown. Also, I will be starting a new job on December 1st. I will be joining the amazing team at Viget Labs as their new front-end developer.