Say I have 6 child divs and they don\'t have unique identifiers:
Wow, nice challenging question =)
while(($children = $(':not(.parent)>.child:lt(3)')).length) {
$children
.parent()
.append(
$('<div class="parent"></div>')
.append($children.remove())
);
}
wrapAll
method, so:while(($children = $(':not(.parent)>.child:lt(3)')).length) {
$children.wrapAll($('<div class="parent"></div>'));
}
There's a small plugin I've written which I use in scenarios like this. It takes a collection, and splits it in to chunks of x
(where x
is the size of each chunk):
$.fn.chunk = function( cLen ) {
var chunks = [];
while ( this.length ) {
chunks.push( this.splice(0, cLen) );
}
return $(chunks);
};
It can then be used like this:
$('.child').chunk(3).each(function() {
$(this).wrapAll('<div class="parent">');
});
Or, as a plugin for this purpose:
$.fn.wrapEvery = function( cLen, wrapperEl ) {
while ( this.length ) {
$( this.splice(0, cLen) ).wrapAll( wrapperEl );
}
};
Which could be used like this:
$('.child').wrapEvery(3, '<div class="parent">');
This should do it:
var $children = $('.child');
for(var i = 0, l = $children.length; i < l; i += 3) {
$children.slice(i, i+3).wrapAll('<div class="parent"></div>');
}
DEMO