Divide a numer of div in blocks

Question

Hi

<div id="WhateverHolder">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

</div>

that i need to have converted into

<div id="WhateverHolder">

<div class="block">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>

<div class="block">
<div class="item first"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item last"></div>
</div>

</div>

I have looked for a plugin that can do this but to no avail what is the easiest way to do this in jQuery

Answer 1

var MAX_CHILDREN_PER_BLOCK = 4;
var parent = $('#WhateverHolder');
var currentBlock;
parent.find('.item').each(function() {
   if (!currentBlock) {
       currentBlock = $('<div class="block"></div>');
       currentBlock.appendTo(parent);
   }
   $(this).appendTo(currentBlock);
   if (currentBlock.children().size() == MAX_CHILDREN_PER_BLOCK) {
       currentBlock = null;
   }
});
parent.find('.block').each(function() {
   $(this).find('.item:first').addClass('first');
   $(this).find('.item:last').addClass('last');
});

Edit: Tested and solved bug explained in the comments

Answer 2

You could use the jQuery function .slice(...):

http://api.jquery.com/slice/

var items = $("#WhateverHolder > div.item");

var blockCount = 4;

for (var i = 0; i < items.length; i+= blockCount) {
    var slice = items.slice(i,i + blockCount);      

    slice.first().addClass('first');
    slice.last().addClass('last');

    slice.wrapAll("<div class=\"block\"></div>");
}

It will make a new block on the nine'th element. And otherwise make it exactly as you want with first and last classes.

Answer 3

You can use selectors (you can improve this) :

place = $('#WhateverHolder')
place.find('div:lt(4)').wrapAll('<div class="block" />')
place.find('div:gt(4)').wrapAll('<div class="block" />')
place.find('.block').each(function (i, e) {
  e = $(e)
  e.find('div:first').addClass('first')
  e.find('div:last').addClass('last')
});

Edit : It Works (with your example) ! (It's easy to made it more flexible (with .each() and .slice())

Answer 4

Here're my 2 cents:

 var listItemsPerList = 10;
 var listItems = $("#WhateverHolder > div").length;

 for (var i = 0; i < Math.round(listItems / listItemsPerList); i++) {
     var startingItem = i * listItemsPerList;
     var endingItem = (i + 1) * listItemsPerList;
     if (endingItem > listItems) { endingItem = listItems };
     $("#WhateverHolder > div").slice(startingItem, endingItem).wrapAll("<div class="block"></div>");
 }

 $("#WhateverHolder").replaceWith($("#WhateverHolder").children());

Answer 5

Use jQuerys .slice() and .wrapAll() method to accomplish that task.

$(function(){
   var $set = $('.item');

   for(var i = 0, len = $set.length; i < len; i+=4){
      $set.slice(i, i+4).wrapAll('<div class="block"/>');
   }
});​

This would wrap each four div.item elements into one div.block.

See: .wrapAll(), .slice()

Example: http://jsbin.com/ahuvu3/edit