jQuery wrap code after x number of elements

Question

I have a UL that contain any number of LIs. I am trying to create some jQuery code that will parse the original UL and wrap a UL and another LI after every 5 of the original LIs.

Starting HTML:

<ul id="original_ul">
    <li class="original_li">..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
    <li>..</li>
</ul>

Required HTML:

<ul id="processed_ul">

    <li class="new_wrap_li">

        <ul class="new_wrap_ul">

            <li class="original_li">..</li>
            <li>..</li>
            <li>..</li>
            <li>..</li>
            <li>..</li>

        </ul><!-- end new wrap ul -->

    </li><!-- end new wrap li -->

    <li class="new_wrap_li">

        <ul class="new_wrap_ul">

            <li class="original_li">..</li>
            <li>..</li>
            <li>..</li>
            <li>..</li>
            <li>..</li>

        </ul><!-- end new wrap ul -->

    </li><!-- end new wrap li -->

</ul><!-- end processed ul -->

I've been using the .each function to go through the LIs and append them to the new processed ul held inside a temp div... now I just need to wrap the new LI and UL around every 5 LIs.

Thanks in advance!!

Al

Answer 1

You can do this:

var lis = $("#original_ul li");
for(var i = 0; i < lis.length; i+=5) {
  lis.slice(i, i+5)
     .wrapAll("<li class='new_wrap_li'><ul class='new_wrap_ul'></ul></li>");
}

This keeps them in the same #original_ul element, but you could just change the ID if that's necessary. This approach generates the exact output html you have in the question aside from the ID on the top <ul>

Answer 2

jQuery('ul#original_ul').attr('id', 'processed_ul')
    .find('li:nth-child(5n)').each(function() {
        $(this).prevAll('li').andSelf()
            .wrapAll('<li class="new_wrap_li"><ul class="new_wrap_ul"></ul></li>');
    });