Jquery group every third div

Question

I have the following structure, one external div (#results) and about 20 divs with a class event. I want to group every 3 events and wrap a div called outer around them,

<div id="result"> <div class="event"> <div class="date">8 April</div> <div class="eventname">my title</div> <div class="link">my link goes here</div> </div> // lots more events here </div> 

Answer 1

Try:

 while ($('#result > .event').length > 0) { $('#result > .event:lt(3)').wrapAll('<div class="wrap"></div>') }​​​​ 

http://jsfiddle.net/rxxjp/

Answer 2

Here's one approach: http://jsfiddle.net/vM9KM/4/

 $('#result').children('div.event:nth-child(3n+1)').each(function(i,el) { $(this).next().andSelf().next().andSelf().wrapAll('<div class="outer">'); });​ 

http://api.jquery.com/nth-child-selector/

Answer 3

I used the splice and wrapAll to group 3 wrapAll and wrapped them inside <div class="wrapper" ></div>

Demo

 var events = $('#result .event'); while (events.length >= 3) { $(events.splice(0, 3)).wrapAll('<div class="wrapper" />'); } //wrap the remaining < than 3 div inside wrapper $(events.splice(0, events.length)).wrapAll('<div class="wrapper" />');