Question

It seems like I need some pretty basic JS help. I an trying to make a script that will add a <div> around every two listelements in a <ul>. The amount of list elements are not under my control, neither is the height of each element. But i need a way to ensure that every pair (shown side by side) takes up the same anount of space.

Hope you can help

Thank you.

So from..

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

to…

 <ul>
     <div>
        <li></li>
        <li></li>
     </div>
     <div>
        <li></li>
        <li></li>
     </div>
     <div>
        <li></li>
        <li></li>
     </div>
 </ul>

Answer 1

using jquery you can try:

            $(document).ready(function(){               
                var lis = $("li");
                for(var i = 0; i < lis.length; i+=2) {
                    lis.slice(i, i+2).wrapAll("<div></div>");
                }
            });