7

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.

4 Answers 4

4

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.

2
  • Ok, this works with jQuery as early as 1.4.4. Thank you very much! Jul 7, 2012 at 18:20
  • You are welcome and here is another, you may like this. :-)
    – The Alpha
    Jul 7, 2012 at 18:25
2

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

1
  • thanks for this! A valid approach, but I think @thecodeparadox's solution is simpler. In any case this solution also works. Jul 7, 2012 at 17:57
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:

1
  • 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? Jul 7, 2012 at 17:54
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

1
  • Edited to be more concise and adaptable. Jul 8, 2012 at 23:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.