Tutorial :Divide a number of div in blocks



Question:

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


Solution:1

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.


Solution:2

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


Solution: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())


Solution:4

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


Solution:5

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());  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »