HTML5 Polyfill for reverse ordered lists

A Polyfill to add support for the 'reversed' attribute in HTML5.

by Louis Lazaris

HTML

<h1>PolyFill for HTML5's Reverse Ordered Lists</h1>

<p>See: <a href="http://www.impressivewebs.com/reverse-ordered-lists-html5">HTML5 Reverse Ordered Lists</a> and: <a href="http://dev.w3.org/html5/spec/Overview.html#the-ol-element">The <code>ol</code> Element</a></p>

<p>(The list below is just a normal reversed list)</p>

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

<p>(The list below has two nested lists; one reversed, one not)</p>
 
<ol reversed>
    <li>List item one
    <li>List item two

        <ol reversed>
               <li>Nested one
               <li>Nested two
               <li>Nested three
               <li>Nested four
        </ol>

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

    <li>List item six
    <li>List item seven
</ol>

<p>(No "reversed" on the list below)</p>

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

<p>(The list below has a "start" attribute)</p>
        
<ol reversed start=435>
    <li>List item one
    <li>List item two
    <li>List item three
    <li>List item four
    <li>List item five
    <li>List item six
</ol>

<p>(The list below uses XHTML syntax for the "reversed" attribute)</p>

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

CSS

body {
     color: #555;
     font-family: Georgia, "Times New Roman", serif;
     line-height: 1.5;
}

h1 {
     font-family: Arial, sans-serif;
     font-size: 1.5em;
     color: #555;
}

JavaScript

// run the code on each ordered list with a 'reversed' attribute.    
    var myLists = $('ol[reversed]'),
        currCount = null,
        currChildren = null;

    $(myLists).each(function() {
        
        // check the existence of the start attribute
        if ($(this).attr('start')) {
            
            // if it exists, convert it to an integer
            currCount = parseInt($(this).attr('start'), 10);
            
            // If it wasn't a number, it will return 'NaN'; if so, use the number of list items instead
            if (isNaN(currCount)) {
                currCount = $(this).children().size();
            } else {
                // It's a number, so round it, just in case some sicko tries to use a decimal value
                currCount = Math.round(currCount);
            }
        
        // do this if the start attribute is not present
        // the first number is derived from the number of list items
        } else {
            currCount = $(this).children().size();
        }
        
        // grab all the child list items
        currChildren = $(this).children();
        
        // go through each list item, adding the 'value' attribute plus currCount number
        // then subract one from currCount so we're ready for the next one
        $(currChildren).each(function() {

           $(this).attr('value', currCount);
           currCount = currCount - 1;

        });
        
    });