JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li> 4 </li>
<li> 1 </li>
<li> 7 </li>
<li> 5 </li>
<li> 3 </li>
</ul>
JavaScript
LIMIT = 3;
var $ul = $('ul');
var new_list = [];
new_list.push( '<ul>' );
//Sort items
var items = $ul.children('li').get();
items.sort(function(a, b) {
var compA = $(a).text();
var compB = $(b).text();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
});
//Create the list as an array
var first = true;
$.each( items , function(index,li) {
if( index%LIMIT == 0 ) {
if (!first) new_list.push( '</ul>' );
new_list.push( '<ul>' );
}
new_list.push( '<li>' + $(li).text() + '</li>' );
first = false;
});
if (new_list[new_list.length-1] != '</ul>') new_list.push('</ul>');
new_list.push('</ul>');
$ul.html( new_list.join('') );