Sort (Alpha) then transpose

Sort then transpose

by Apple Ilagan

HTML

<script src="https://rawgithub.com/litera/jquery-transpose/master/jquery.transpose.min.js"></script>
<div class="footernav">
    	<div class="menu-menu-1-container"><ul id="menu-menu-2" class="menu"><li class="menu-item menu-item-thttp://jsfiddle.net/#saveype-custom menu-item-object-custom menu-item-home menu-item-27"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/buying/">Buying</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/selling/">Selling</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/mortgage-info/">Mortgage Info</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/about-me/">About Me</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/testimonials/">Testimonials</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-23 current_page_item menu-item-30"><a href="http://aios2-staging.agentimage.com/m/mandelwillsell.com/htdocs/contact-me/">Contact Me</a></li>
</ul></div>    </div>

CSS

.footernav li {
text-transform: uppercase;
font: 11px Open sans,sans-serif;
list-style: none;
/*width: 100px;*/ /*four*/
width:50px;
padding: 7px 0;
margin: 0;
    float:left;
}

JavaScript

/* FROM http://james.padolsey.com/javascript/sorting-elements-with-jquery/ */

/**
 * jQuery.fn.sortElements
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode; 
 *   })
 *   
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
jQuery.fn.sortElements = (function(){
 
    var sort = [].sort;
 
    return function(comparator, getSortable) {
 
        getSortable = getSortable || function(){return this;};
 
        var placements = this.map(function(){
 
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
 
                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
 
            return function() {
 
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
 
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
 
            };
 
        });
 
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
 
 ...