how to dynamically group every n-divs and wrap up with a new div in JQuery?

Question

I want to select every 4 divs with class "contents" and wrap it in another new div that is created dynamically using Jquery. my HTML is as follows;

<body>
<div id="postings">
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
</div>
</body>

I want

<body>
<div id="postings">
<div id="newDivforWraping1">
    <div class="contents"></div>
     <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
</div>
<div id="newDivforWraping2">
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
</div>
<div id="newDivforWraping3">
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
    <div class="contents"></div>
</div>
</div>
</body>

my current JScript code is below;

(function() {
    "use strict";
    $(document).ready(function() {
        insertdiv("newDivforWraping1",4);
        insertdiv("newDivforWraping2",8);
        insertdiv("newDivforWraping3",12);
        });

        //create div for every grouping them into three
        function insertdiv(divname,n) {
            $("<div/>", {class: "test",id:divname}).appendTo("#postings");
            var allcontentspost = $(".contents").each();
            for (var i=n-4;i<n;i++) {
                allcontentspost[i].appendTo("#"+divname);
            };
        }
})();

That is a typo error when I re-typed my code. I have fixed above. — brain storm, Jul 30 '13 at 04:35
possible duplicate of [Wrap every 3 divs in a div](http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div) — Felix Kling, Apr 11 '14 at 00:35

score 7 · Accepted Answer · answered Jul 30 '13 at 04:45

You can use the slice to get the numbers and then wrapAll

var divs = $(".contents");
for(var i = 0; i < divs.length; i+=4) {
   j = i + 1; 
  divs.slice(i, i+4).wrapAll("<div id='newDivforWraping"+j+"' class='new'></div>");
}

check this out

http://jsfiddle.net/RQNrt/

I hope this can help

Tushar Gupta - curioustushar · Answer 2 · 2013-07-30T05:11:30.643

2

DEMO

var sel;
var count = 1;
while ((sel = $('#postings > div.contents')).length > 0) {
    sel.slice(0, 4).wrapAll('<div class= "test" id="newDivforWraping' + count+++'"></div>');
}

edited Jul 30 '13 at 05:11

answered Jul 30 '13 at 04:45

Tushar Gupta - curioustushar

58,085
24
103
107

score 0 · Answer 3 · answered Jul 30 '13 at 04:57

Hope this helps: code

jQuery.fn.outerHTML = function() {
  return jQuery('<div />').append(this.eq(0).clone()).html();
};

wrappings = [];
elems = 0; // from 1 to 4
count = 0;
$.each($('div.contents'), function (index, elem) {
    if (elems == 4) {
        elems = 0;
        count++;
    }
    console.log('count:' + count);
    if (! wrappings[count]) {
        wrappings[count] = []
    }
    wrappings[count].push($(elem).outerHTML());

    elems++;
});
console.log(wrappings);
$.each(wrappings, function (index, w) {
    wrappings[index] = w.join('');
});

bigHTML = '';
$.each(wrappings, function (index, w) {
    bigHTML += '<div id="newWrap_' + index + '">';
    bigHTML += w;
    bigHTML += '</div>'
});
$('div#postings').html(bigHTML);

how to dynamically group every n-divs and wrap up with a new div in JQuery?

3 Answers3

Linked