jQuery wrap code after x number of elements

Question

Hi all - 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 use a loop.

For example: (Untested)

while($('ul#original li').length) {
    var newContainer = $('<li class="new_wrap_li"><ul class="new_wrap_ul" /></li>')
        .appendTo('#processed_ul');


    $('ul#original li:lt(4)').detach().appendTo(newContainer.children('ul'));
}

Answer 2

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 3

Something like this will do it:

$('#original_ul').find('li:nth-child(5n)').each(function(){
    $(this).prevAll('li').andSelf()
        .wrapAll('<ul class="new_wrap_ul"></ul>');
}).end().find('ul').wrap('<li class="new_wrap_li"></li>')
.find('li:first-child').addClass('original_li');

Answer 4

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>');
    });

Answer 5

DEMO: http://jsbin.com/agixi/edit

If you know how many items ( ex: 10 ) why not use eq() for find LI index? :-)

var wrp = '<li class="new_wrap_li"><ul class="new_wrap_ul"></ul></li>';
$('li').eq(5).nextAll().andSelf().wrapAll(wrp).eq(0).attr('class','original_li');
$('li').eq(4).prevAll().andSelf().wrapAll(wrp);

btw imho the most elegant is the one from Nick Craver ;-)