Jquery for wrapping elements

Question

I have this code and every 3 I need to wrap with a div

(original)

<div id="entries"> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> </div> 

(should become)

 <div id="entries"> <div> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> </div> <div> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> </div> <div> <a class="thumbnaila"><img class="thumbnail" alt="" src="blabla"/></a> </div> </div> 

Answer 1

I put together this plugin that does a great job

 (function($){ $.fn.wrapChildren = function(options) { var options = $.extend({ childElem : undefined, sets : 1, wrapper : 'div' }, options || {}); if (options.childElem === undefined) return this; return this.each(function() { var elems = $(this).children(options.childElem); var arr = []; elems.each(function(i,value) { arr.push(value); if (((i + 1) % options.sets === 0) || (i === elems.length -1)) { var set = $(arr); arr = []; set.wrapAll($("<" + options.wrapper + ">")); } }); }); } })(jQuery); 

You pass an options object defining

• childElem - nodeType element for immediate children to carry
• sets - how you want to group the children. For example, sets of 3 in your case. Default 1
• wrapper - an element for wrapping children. default - <div>

Use your test data as well.

 $(function() { $('#entries').wrapChildren({ childElem : 'a' , sets: 3}); }); 

Here is a working demo . Add / edit to the url to play with the code.

EDIT:

I am trying to make this a more complete plugin if this proves useful. .

I created an improved version of the plugin

Answer 2

Powerful work and maybe not the smartest thing:

 var $entries = $("#entries"); var $div = $('<div></div>').appendTo($entries); while($div.next().length > 0){ $div.append($div.nextAll().slice(0,3)); $div = $('<div></div>').appendTo($entries); } 

Answer 3

Apply a class to each "sub-div", which fills the contents horizontally and gives it clrar: both; as a css attribute, and it will display the way you want. If you want to display it vertically, use float: left; instead of this.

Answer 4

 var $c = $('#entries'); while ($c.children('a').length) { $c.children('a:lt(3)').wrapAll('<div>'); } 

working demo (albeit with a different HTML structure) at http://jsfiddle.net/alnitak/sppgP/