JSFiddle - React, Tailwind, and code Playground

by Laurie

HTML

<DIV id="swimbi">
    <UL>
        <LI data-order="7">Personal Lines</LI>
        <LI data-order="6">Tools
            <UL>
                <LI data-order="3">My Tools</LI>
                <LI data-order="3">Standard Operating Procedures 
                    <UL>
                        <LI data-order="1">Operations - SOP</LI>
                        <LI data-order="2">Product Management - SOP</LI>
                        <LI data-order="3">Maintenance - SOP</LI>
                    </UL>
                </LI>
                <LI data-order="4">Notice to Manual Holders</LI>
                <LI data-order="4">Rational ClearQuest</LI>
            </UL>
        </LI>
        <LI data-order="4">PDCL</LI>
        <LI data-order="5">FUW Tools
            <UL>
                <LI data-order="2">Deregulation/Manuscript Filings Req</LI>
                <LI data-order="3">CUW Training</LI>
                <LI data-order="4">CAT Exposure Management
                    <UL>
                        <LI data-order="1">RMS RiskBrowser</LI>
                        <LI data-order="2">RiskBroswer Resource Page</LI>
                    </UL>
                </LI>
                <LI data-order="5">Insurance News
                    <UL>
                        <LI data-order="1">Advisen FPN</LI>
                        <LI data-order="2">Bloomberg Insurance News</LI>
                        <LI data-order="3">Business Insurance</LI>
                        <LI data-order="4">Insurance Information Institute</LI>
                        <LI data-order="5">Insurance News Net</LI>
                        <LI data-order="7">Business Journal</LI>
                    </UL>
                </LI>
                <LI data-order="6">Insurance Links
                    <UL>
                        <LI data-order="2">ISOnet</LI>
                        <LI data-order="3">Ultimate Insurance Links</LI>
                        <LI data-order="10">AAIS Direct</LI>
                        <LI...

JavaScript

//function listSort(a, b) {
//    var keyA = $(a).first('a').text().toUpperCase().trim(),
//    keyB = $(b).first('a').text().toUpperCase().trim();
//
//    return (keyB < keyA) ? 1 : -1;
//}

function listSort(a, b) {
    //var keyA = $(a).first('a').text().toUpperCase().trim(),
   // keyB = $(b).first('a').text().toUpperCase().trim();
    var keyA = parseFloat($(a).attr("data-order"));
    var keyB = parseFloat($(b).attr("data-order"));

    return (keyB < keyA) ? 1 : -1;
}


function sortItems(items) {
    items.sort(listSort);
}

$(function () {
    var lists = $('ul');

    lists.each(function (index) {
        var listItems = $(this).children('li:not(.fixedOrder)').get();
        var listSiblings = $(this).siblings();
        sortItems(listItems);
        $(this).append(listItems);
    });
});