Question

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.

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.

Here’s the existing markup – in this example only the first parent link has children / grand children:

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

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”):

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

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?

If anyone has any ideas or tips they are greatly appreciated,
Thanks!

Answer 1

OK, well ignoring the invalid html issue as requested something like the following should work:

var $lis = $("#nav .drop > ul > li"),
    i = Math.ceil($lis.length / 2);

$lis.slice(0, i).wrapAll($("<div />").addClass("column"));
$lis.slice(i).wrapAll($("<div />").addClass("column last"));

Going back to the issue of the invalid html, I would think that you could make it valid by doing this:

$lis.slice(0, i).wrapAll($("<li><ul></ul></li>").addClass("column"));
$lis.slice(i).wrapAll($("<li><ul></ul></li>").addClass("column last"));

Of course you can change the CSS display property of the li elements if you want them displayed side-by-side…