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

Question

1.07M viewsSeptember 16, 2022html javascript jquery

2

brain storm September 12, 2022 0 Comments

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

3 Answers

score 0 · Answer 1 · 2022-09-13T11:11:54+00:00

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

score 2 · Answer 2 · 2022-09-13T06:55:53+00:00

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

score 7 · Answer 3 · 2022-09-13T04:21:51+00:00

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