Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to reverse Order of list using JavaScript and HTML

We will learn in this article the process to reverse the order of a list with JavaScript and HTML.

Some ordered lists are better presented in descending order. For example, the newspaper website list works better in reverse-chronological order so that the most recent work appears at the top of the list, and is numbered highest-to-lowest.

Ordered lists in html are created using the ol element, but there’s no way to present a list in descending order. (It’s in the HTML5 spec, but might be a while before it’s generally usable.)

The JavaScript could also be used to achieve adding spurious numbers to the margin and generally messing up the semantics of the list. We need to write a function that finds each ol element on the page that has the class “reversed”, and changes the “value” attribute of each li to the number it would have in a native reversed-order presentation. It’s not semantically perfect, but it degrades gracefully and will do until browsers support the HTML5 incarnation of ol.

The JavaScript looks like this:

Listing 1: JavaScript to reverse ordered list

function reverse_lists() {
    var olists = document.getElementsByTagName('ol');
    for (var i = 0; i < olists.length; i++) {
        if (!olists[i].className.match(/\breversed\b/))
            continue;
        var items = olists[i].getElementsByTagName('li');
        for(var j = 0; j < items.length; j++) {
            items[j].setAttribute("value", items.length - j);
        }
    }
}

One can apply the code by calling the function after all of your list elements where the first script element can be put in the document’s head if you have control over that.

Listing 2: Calling the function

<ol class="reversed">
    <li>Most recent item.</li>
    <li>Less recent item.</li>
.
.
.
</ol>
<script type="text/javascript" src="reorder.js"></script>
<script type="text/javascript">
    reverse_lists();
</script>

With all the hype surrounding the new APIs and the fancy parts of CSS3, we have almost forgotten about the new reversedattribute that permits the users to write a descending list of numbered items, as opposed to the default ascending list of numbered items.

Summary of the “reversed” Attribute

As mentioned, using the new reversed attribute, one can easily tell the browser that the numbering for the list items should display in descending order, instead of the default ascending.

At first, this can make you confuse and put you under impression that this attribute would actually physically reverse the contents of the list. But that’s not the case. The items will still appear in the same order as they appear in the markup, but the numbers will begin with the highest. So if you have 10 list items, then the first list item will display with a number 10, and the second with a number 9, and so forth.

The syntax is simple, you just add the reversed attribute to any <ol> element. This attribute is a Boolean attribute, so it doesn’t take any value. If you’re using an XHTML doctype, you would need to do reversed="reversed" to pass validation.

The code looks like this:

Listing 3: reversed attribute code

<ol reversed>  
    <li>List item one</li>  
    <li>List item two</li>  
    <li>List item three</li>  
    <li>List item four</li>  
    <li>List item five</li>  
</ol>  

The result in the browser would be:

Output to be displayed in the browser

Figure 1: Output to be displayed in the browser

The <ol> element has a new attribute reversed in HTML5. In addition, a couple of related attributes purged in HTML 4 have made a return, namely start and type for <ol>, and value for <li>. Making things more interesting, the returning attributes were removed from HTML 4 for being presentational.

As we all know, presentational stuff belongs in CSS, not HTML. In HTML 4.01, the type attribute was replaced by list-style-type, and the start and value attributes were dropped, with only the potential (although fiddly) replacement in some cases of CSS generated content-based counters.

The type Attribute #

While an ordered list’s counter style is generally presentational, in some documents it can be a part of the document’s meaning, as the specification for the type attribute notes:

The type attribute can be used to specify the kind of marker to use in the list, in the cases where that matters (e.g. because items are to be referenced by their number/letter).

The “start” Attribute

In addition to the reversed attribute, HTML5 also reintroduces the start attribute for ordered lists since this attribute was introduced in older versions of HTML but eventually became deprecated in HTML4.

Using this attribute, you can specify at what number you want the list to begin. The value must be an integer; otherwise it will just default to “1″. So, without reversed, if you specify a start of “100″, then each list item will be numbered starting with 100. The result would be as shown below:

Output using start attribute

Figure 2: Output using “start” attribute

If you reverse the list, and specify a start value, then the list will begin with that specified value and will go backwards. Like this:

Because it’s an older attribute, the start attribute has full support everywhere, so that’s good news.

Browser Support for “reversed”?

After testing on the newest stable releases of various browsers, and verifying with this source, it seems that the reversed attribute has no support in any browser minimal browser support. Here’s the interesting thing: Every browser allows you to use the value attribute to change the number of each list item directly. This attribute was deprecated in HTML4 but is valid in HTML5.

Using this attribute, we can do this:

Listing 4: Browser Support using reversed

<ol>  
    <li value=5>List item one</li>  
    <li value=4>List item two</li>  
    <li value=3>List item three</li>  
    <li value=2>List item four</li>  
    <li value=1>List item five</li>  
</ol>  

But we all know that’s not easy and unless you’re doing something funky where you’re adding numbers that have no order or whatever.

Talking about the jQuery polyfill, it looks for the presence of the reversed attribute on an ordered list; then it counts the number of list items in the list; then it adds the value attribute to each list item, with the appropriate integer.It also takes into consideration the start attribute, so if that’s present, it will start the numbered list at that number and descend.

Conclusion

In this article, we learnt on the process to reverse the order of a list making use of JavaScript and HTML. See you next time.



Software developer with more than 5 years of development on Java, HTML, CSS.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login