How to Select a series of list-item elements, split them into two groups and wrap each group in a new surrounding DIV
<p>I'm trying to manipulate an unordered list that is powering the Navigation bar of a site.  I want to split the children LI's into two groups with a new div surrounding these groups.</p>

<p>It's a bit difficult to explain in words, so I'll let my markup do the talking.  However, to recap let's imagine we have 4 "children level" list items and we want to split those 4 LI's into 2 groups (so 2 LI's per group, if there were 10 then we'd want 5 per group, if there were 5, then we'd want 3 in the first group and 2 in the second group) and wrap each one of those new groups in a newly created DIV.</p>

<p>Here's the existing markup - in this example only the first parent link has children / grand children:</p>

<pre><code>&lt;div id="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Parent Link 1&lt;/a&gt;
            &lt;div class="drop"&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 1&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 2&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 3&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 4&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;    
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Parent Link 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Parent Link 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Parent Link 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>And this is what I would like the markup to look like after our jQuery has manipulated the DOM (simply adding the divs with the class of "column"):</p>

<pre><code>&lt;div id="nav"&gt;
&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent Link 1&lt;/a&gt;
        &lt;div class="drop"&gt;
            &lt;ul&gt;
                &lt;div class="column"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 1&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 2&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/div&gt;
                &lt;div class="column last"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 3&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Child 4&lt;/a&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 1&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 2&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 3&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 4&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;Grand Child 5&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/li&gt;
                &lt;/div&gt;
            &lt;/ul&gt;
        &lt;/div&gt;    
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent Link 3&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parent Link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Never mind the fact that this results in invalid HTML... is this possible?  Well, of course it's possible, but I suppose the question is, is this possible in a reasonable amount of jQuery?  Are there jQuery functions already in place that can do most of the heavy lifting?</p>

<p>If anyone has any ideas or tips they are greatly appreciated,
Thanks!</p>
