jQuery wrap every X elements in div

Question

I have a list of elements (divs) preseded by a H3 tag

<         


        

Answer 1

Try this. A simple solution..

var h3s = $('h3');   // caching all h3 tags

// looping over h3 tags
$.each(h3s, function(i, hs) {

    // selecting div.item between two h3
    // for example
    // div.item between this (current h3) and h3:eq(1) (next h3) and so on

    var divs = $(this).nextUntil($('h3').eq(i+1), 'div.item');

    // looping with divs
    $.each(divs, function(i, el) {

        // checking for div.item
        // to group for wrapping

        if(i % 3 == 0) {
            divs.slice(i , i+3).wrapAll('
');
        }
    });
});

Working sample

Related refs:

• .nextUntil()

• wrapAll()

• .slice()

• .each()