jQuery Grouping Elements

Question

Say i have 10 elements and I want to create groups of 5, How can I wrap X elements in jQuery? here is my markup:

    <div class="mainWrap">
<!-- wrap with div -->
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<!-- close wrap --><!-- open new wrap -->
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<!-- close wrap -->
</div><!-- mainWrap -->

thought about iterating childs and then opening and closing div, looks too complicated, tried `.wrapAll()` and got confused with it... — Broshi, Apr 29 '15 at 12:39
none of the two methods I tried (you can see them in the code) seems to be doing what I need, thats why I ask how can I do it... — Broshi, Apr 29 '15 at 12:44
Found exactly what I was looking for: http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div — Broshi, Apr 29 '15 at 12:59

score 1 · Answer 1 · answered Apr 29 '15 at 12:42

Dynamically? Maybe something like.

var grouping = [];
var $newWrapping = $('<div class="mainWrap"></div>");

$('.mainWrap .item').each(function(index, value){
    grouping.push($(value));

    if (grouping.length > 4) {
        $newWrapping.append(grouping);
        grouping = [];
    }
});

if (grouping.length > 0) {
    $newWrapping.append(grouping);
}

$('.mainWrap').replaceWith($newWrapping);

jQuery Grouping Elements

1 Answers1