Best way to select n elements at a time in jQuery

I have an ul of li elements, what I want to do is this:

1. If there are 6 or less li elements, select them all and put them into a new ul.
2. For any number greater than 6 elements, loop through, selecting 6 elements, put into new ul, start at the next li element and continue.
3. If there are less than 6 element开发者_如何学C left at the end, they get put into a new ul as well.

If I start out with 5 li elements, I would hope to end up with 1 ul element with 5 li children.

If I start out with 40 li elements, I would hope to end up with 7 ul elements, 6 with 6 li children and 1 with 4.

What would be the most efficient way of handling this in jQuery?

You can do it by looping over and using .slice() with .wrapAll(), like this:

var lis = $("#myUL li");
for(var i = 0; i < lis.length; i+=6) {
  lis.slice(i, i+6).wrapAll("<li><ul></ul></li>");
}

You can test it out here. Note that this version creates nested <ul> elements inside the original (inside their own <li> so it's valid). If you don't want that and want to replace the original <ul>, .unwrap() first like this:

var lis = $("#myUL li").unwrap();
for(var i = 0; i < lis.length; i+=6) {
  lis.slice(i, i+6).wrapAll("<ul></ul>");
}

You can test that version here.

I would recommend that you keep track of how many elements are inside the UL. For example, you can set a global variable like this at the top of the page:

<script type="text/javascript">
var listItems = 0;
</script>

Increment that variable whenever new items are added to the list. If they're added while looping through a PHP array (or equivalent in other languages), do this:

<? foreach ($items as $item):?>
  <script type="text/javascript">
  listItems++;
  </script>
  <li><?=$item;?>
<?endforeach;?>

If they're added through javascript, do something like this:

function addToList(item)
{
   listItems++;
   $("#list").append("<li>" + item + "</li>");
}

Then, you can use that variable to determine how many elements are in the ul, e.g:

if (listItems < 6)
   //Do something
else
   // Do something else

Here is another solution.

var lis = $('#myul li:eq(0), #myul li:nth-child(6n+1)'), // get first and 6n+1
    result = $('#result');

lis.each(function(el, i){
    var nextSix = $(this).nextAll(':lt(5)').andSelf().clone(); // take next 6 copy
    $('<ul/>').append(nextSix) // create new ul add lis
        .appendTo(result); // add to container
});

http://jsfiddle.net/9GFf6/