CODEWITHSUNDEEP
jquery
Broshi
Broshi

Reputation: 3592

jQuery Grouping Elements

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 -->

Upvotes: 1

Views: 81

Answers (1)

Taplar
Taplar

Reputation: 24965

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);

Upvotes: 1

Related Questions