JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<ul>
   <li> 4 </li>
   <li> 1 </li>
   <li> 7 </li>
   <li> 5 </li>
   <li> 3 </li>
</ul>

CSS

/* styling to highlight the 3 resulting <ul> elements */

ul { font-size: 1.5em; float: left; clear: both; padding:10px; }

ul:nth-child(1) { background-color: red; }
ul:nth-child(2)  { background-color: lightblue; }
ul:nth-child(3)  { background-color: green; }

JavaScript

var i   = 0,
        ul  = $("ul"), 
        lis = ul.children().detach(),
        group;

    lis.sort(function (a, b) {
        return $.text(a).localeCompare($.text(b));
    });

    while ((group = lis.slice(i, i += 2)).length) {
        group.wrapAll('<ul></ul>');
    } 

    ul.replaceWith(lis.closest("ul"));