JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<ul>
    <li class=" ">C</li>
    <li class=" ">A</li>
    <li class=" ">B</li>
    <li class=" ">E</li>
    <li class=" ">D</li>
    <li class="3">Z</li>
    <li class="6">Y</li>
    <li class="14">X</li>
</ul>

JavaScript

function myCompare(a, b) {
    var cls_a = parseInt(a.classList, 10) || -1;
    var cls_b = parseInt(b.classList, 10) || -1;
    if (cls_a === cls_b) {
        var str_a = a.innerText || a.textContent;
        var str_b = b.innerText || b.textContent;
        return str_a.localeCompare(str_b);
    } else {
        return cls_b - cls_a;
    }
}

/*
var $el = $('li');
var $ul = $('ul');
$el.sort(myCompare);
$el.each(function() {
    $ul.append(this);
});
*/

$('li').sort(myCompare).appendTo($('ul'));