JSFiddle - React, Tailwind, and code Playground
by aljordan82
HTML
<ul id="test">
<li>Item A
<ul>
<li>Item A1</li>
<li>Item A2</li>
<li>Item A3</li>
<li>Item A4</li>
</ul>
</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
<li>Item E</li>
<li>Item F</li>
<ul>
<li>Item F1</li>
<li>Item F2</li>
<li>Item F3</li>
</ul>
<li>Item G</li>
<li>Item H</li>
</ul>
CSS
#test div { border : 1px solid red;}
JavaScript
while ($("ul > li").not("ul li li").length >0 ){
$("ul > li").slice(0, 4).wrapAll("<div/>")
}