jQuery wrap every X elements in div

Question

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

<h3></h3>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<h3></h3>
<div class="item"></div>
<div class="item"></div>

etc...

Using jQuery, I'd like to group every 3 divs (or less) followed by each h3 like this:

<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class=row>
    <div class="item"></div>
</div>
<h3></h3>
<div class=row>
    <div class="item"></div>
    <div class="item"></div>
</div>

I tried a solution proposed here: Insert <div> for every 5 elements using Javascript but it obviously grouped ALL the divs. I also tried using ~ selector without any success:

var a = $('h3 ~ div.item');

for( var i = 0; i < a.length; i+=3 ) {
    a.slice(i, i+3).wrapAll('<div class="row"></div>');
}

Any help will be highly appreciated.

The Alpha · Accepted Answer · 2012-07-07T18:27:21.570

I've ended up with this and it's working

$(function(){
    var h3=$('h3');
    h3.each(function(){
        var divs=$(this).nextUntil('h3');
        var row_wreapper=$('<div></div>');
        while(divs.length)
        {
            var grp=divs.splice(0, 3);
            var row=$('<div class="row"></div>');
            $(grp).each(function(){
                row.append($(this));
            });
            row_wreapper.append(row);
        }
        $(this).after(row_wreapper.html());
    });
});

DEMO or with a little extra checking of item class DEMO.

Or

$(function(){
    var h3=$('h3');
    h3.each(function(){
    var divs=$(this).nextUntil('h3');
    var row_wreapper=$('<div></div>');
    while(divs.length)
    {
        var grp=divs.splice(0, 3);
        var row=$(grp).wrapAll('<div class="row"></div>');
        if(row.children().length) row_wreapper.append(row);
    }
    $(this).after(row_wreapper.html());
    });
});

DEMO.

Ok, this works with jQuery as early as 1.4.4. Thank you very much! — Daniel Sachs, Jul 07 '12 at 18:20
You are welcome and [here is another](http://jsfiddle.net/a8pGT/6/), you may like this. :-) — The Alpha, Jul 07 '12 at 18:25

score 2 · Answer 2 · answered Jul 07 '12 at 16:34

There is a plugin here that I use when I want to wrap, just because it's clean and allows me to do amazing things. || You can find the source for the wrapper in plain-text here

The only issue is that -- because of your DOM we have to do some structuring of all the items and group them, before we can iterate over those lists.

We'll do this first by ->

$.each($('h3'), function(i,v){
  $(v).nextUntil($('h3')).wrapAll('<div class="row-container"></div>');    
});

.nextUntil() is jQuery 1.6+, so hopefully there's no restrictions there.

Now, with the plugin above that I've linked, we can reference it and have it wrap objects within each new row-container.

$.each($('.row-container'), function(i,v){
  $(v).nwrapper({
    wrapEvery      : 3,
    defaultClasses : false,
    extraClasses: ['row']     
  });
});

The proof is in the pudding so here's the jsFiddle

thanks for this! A valid approach, but I think @thecodeparadox's solution is simpler. In any case this solution also works. — Daniel Sachs, Jul 07 '12 at 17:57

thecodeparadox · Answer 3 · 2012-07-07T16:44:17.033

2

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('<div class="row">');
        }
    });
});

Working sample

Related refs:

edited Jul 07 '12 at 16:44

answered Jul 07 '12 at 16:38

thecodeparadox

86,271
21
138
164

Hi @thecodeparadox, if I wanted to use nextUntil() with jquery 1.4.4 (which uses selector, not element) how should I use it? Adding class to H3's? – Daniel Sachs Jul 07 '12 at 17:54

Beetroot-Beetroot · Answer 4 · 2012-07-08T23:47:15.217

1

You could do something like this:

(function(c, h, s, $g, n) {
    $(c).find([h,s].join()).each(function() {
        if ($(this).filter(h).length || $g.find(s).length == n) {
            $g = $g.clone().empty().insertAfter(this);
        }
        $g.append($(this).not(h));
    });
})(document, 'h3', '.item', $('<div class="itemGroup"/>'), 3);

If your elements are contained in a specific container, then pass the container's selector (eg. "#myContainer") instead of document.

DEMO

edited Jul 08 '12 at 23:47

answered Jul 07 '12 at 18:22

Beetroot-Beetroot

18,022
3
37
44

Edited to be more concise and adaptable. – Beetroot-Beetroot Jul 08 '12 at 23:48

jQuery wrap every X elements in div

4 Answers4

Linked

Related