jQuery wrap every X elements in div

Question

I have a list of elements (divs) preseded by a H3 tag

<         


        

Answer 1

There is a plugin here that I use when I want to wrap, just because it's clean and allows me to do amazing things. || You can find the source for the wrapper in plain-text here

The only issue is that -- because of your DOM we have to do some structuring of all the items and group them, before we can iterate over those lists.

We'll do this first by ->

$.each($('h3'), function(i,v){
  $(v).nextUntil($('h3')).wrapAll('
');    
});

.nextUntil() is jQuery 1.6+, so hopefully there's no restrictions there.

Now, with the plugin above that I've linked, we can reference it and have it wrap objects within each new row-container.

$.each($('.row-container'), function(i,v){
  $(v).nwrapper({
    wrapEvery      : 3,
    defaultClasses : false,
    extraClasses: ['row']     
  });
});

The proof is in the pudding so here's the jsFiddle