JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<div class="container">
    <div class="sortable">3</div>
    <div class="sortable">1</div>
    <div class="sortable">2</div>
    <div class="sortable">3</div>
    <div class="sortable">9</div>
    <div class="sortable">3.2</div>
    <div class="sortable">45</div>
    <div class="sortable">7</div>
    <div class="sortable">9</div>
    <div class="sortable">100</div>
    <div class="sortable">90</div>
    <div class="sortable">-10</div>
</div>

JavaScript

var container = document.querySelector('.container');
sortChildren(container);

function sortChildren(container, comparator) {
    if(typeof comparator === 'undefined') {
        comparator = function (a, b) {
            var t1 = a.textContent;
            var t2 = b.textContent;
            if(!isNaN(t1) && !isNaN(t2)) {
                t1 = parseInt(t1);
                t2 = parseInt(t2);
            }
            return t1 < t2 ? -1 : (t1 > t2 ? 1 : 0);
        }
    }
    if(typeof comparator !== 'function') {
        throw new Error('Optional comparator must be a function');
    }
    Array.prototype.slice.call(container.children, 0).sort(comparator).forEach(function (item) {
        container.appendChild(item);
    });
}