JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<ul id="alnum">
    <li>zulu</li>
    <li>alpha</li>
    <li>charlie</li>
    <li>bravo</li>
</ul>
<hr>
<ul id="nested">
    <li><span>zulu</span></li>
    <li><span>alpha</span></li>
    <li><span>charlie</span></li>
    <li><span>bravo</span></li>
</ul>
<hr>
<ul id="reverse">
    <li><span>zulu</span></li>
    <li><span>alpha</span></li>
    <li><span>charlie</span></li>
    <li><span>bravo</span></li>
</ul>

JavaScript

$(function(){
    
    $.fn.phase = function() {
        return this.each(function() {
            var $this = $(this),
                placeholder = $this.data('redetach');
    
            if (placeholder) {
                placeholder.parentNode.replaceChild(this, placeholder);
                $this.removeData('redetach');
            } else {
                placeholder = document.createTextNode(''),
                this.parentNode.replaceChild(placeholder, this);
                $this.data('redetach', placeholder);
            }
        });
    };
    
    $.fn.sortChildren = function(map, compare) {
        return this.each(function() {
            var $this = $(this).phase(),
                $children = $this.children(),
                _map = [],
                length = $children.length, 
                i;
        
            for (i = 0; i < length ; i++) {
                _map.push([i, (map || $.fn.sortChildren.map)($children[i])]);
            }
                    
            _map.sort(compare || $.fn.sortChildren.compare);

            for (i = 0; i < length ; i++) {
                this.appendChild($children[_map[i][0]]);
            }
            
            $this.phase();
        });
    };
    $.fn.sortChildren.compare = function(a, b) {
        return a[1] > b[1] ? 1 : -1;
    };
    $.fn.sortChildren.reverse = function(a, b) {
        return a[1] > b[1] ? -1 : 1;
    };
    $.fn.sortChildren.map = function(elem) {
        return $(elem).text().toLowerCase();
    };
  
    $('#alnum').sortChildren();
    $('#nested').sortChildren(function(elem) {
        return $(elem).children('span').text().toLowerCase();
    });
    $('#reverse').sortChildren(function(elem) {
        return $(elem).children('span').text().toLowerCase();
    }, $.fn.sortChildren.reverse);
    
});