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

Answer 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.