How to wrap every 3 child divs with html using jquery? [duplicate]

Answer 1

As a plugin:

jQuery.fn.wrapInChunks = function(html, chunkSize) {

    chunkSize = chunkSize || 1;

    var items = this.get(),
        rows = [],
        cur = rows[0] = $(html);

    while (items[0]) {

        if (rows[rows.length - 1].children().length === chunkSize) {
            cur = rows[rows.length] = $(html);
        }

        cur.append( items.shift() );

    }

    return this.pushStack(rows);

};

$('.boxgrid').wrapInChunks('<div class="row" />', 3).appendTo('.items');

Answer 2

Use map(), slice(), and wrapAll();

    $(document).ready( function(){
        var results =[];
        var elements = $(".items").children('.boxgrid');
        $.map( elements  , function(i, n){
            if( n%3 === 0 ){
                results.push(n);
            }
        });
        $.each( results , function(i,v){
            elements.slice(v, v+3).wrapAll('<div class="row"></div>');
        });
    });

This is tested and works.

Answer 3

I think what you actually want is the range of divs between 1 and 3, not just wrapping the third div, yeah?

For getting a range you'll need to use jquery slice.

Answer 4

You would have to slice the elements and make new div elements to contain the sliced elements. Below is a code example. I'm not aware of any more simpler method to do this.

$(".items").each(function()
{   
    var rowDiv = document.createElement("div");
    $(rowDiv).addClass("row");

    for(i=0; i< $(this).find("> .boxgrid").length ; i+= 3)
    {   
        $(rowDiv).append( $(this).find("> .boxgrid").slice(i, i+3).clone() );       
        $(this).append(rowDiv);
        rowDiv = document.createElement("div");
        $(rowDiv).addClass("row");
    }
    $(this).find("> .boxgrid").remove();//Remove all the immediate boxgrid child elements.  
});