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

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

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 3

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