jquery - jQuery add "close & open" container to split list

Question

I'm trying to split a list via jQuery. I need a fix, because otherwise the navigation will crash my theme.

Here's my code, I've already tried several things like append, after and insertAfter. The problem is that jQuery always adds the closing and reopen tag in the right order, but I need it the other way:

<ul>
<li>link here</li>
<li>link here</li>
<li>link here</li>
<li>link here</li>
</ul>

this is what i want:

<ul>
<li>link here</li>
<li>link here</li>
</ul><ul>
<li>link here</li>
<li>link here</li>
</ul>

this is my code so far:

var thirdLevelNavigation = $('ul.sub-menu').clone();
var countItems = 0;
thirdLevelNavigation.children('li').each(function() {                                       
    if(countItems == 5) {
        // heres the trouble-maker
        $('</ul><ul class="sub-menu">').insertAfter(this);
        countItems = 0;
    }                                       
    countItems++;                               
});                                 
thirdLevelNavigation.appendTo('.menu-main-container');

(its a sub-nav tweak for multi dimensional wordpress navigations)

TIA!

Answer 1

var ul = $('ul');
var items= ul.children();
for (var i= 0; i<items.length-2; i+= 2)
    items.slice(i, i+2).appendTo( $('<ul>').insertBefore(ul) );

现场演示