Title: wrapAll jQuery problem
Tags: javascript;jquery;html
Question: I need to wrap three divs into one, but that group of three divs is repeating itself several times in code. Maybe my HTML will explain:

```<div class="one" /&gt;
<div class="two" /&gt;
<div class="three" /&gt;

<div class="one" /&gt;
<div class="two" /&gt;
<div class="three" /&gt;
```

What I'm trying to achieve is this:

```<div class="wrap"&gt;
  <div class="one" /&gt;
  <div class="two" /&gt;
  <div class="three" /&gt;
</div&gt;

<div class="wrap"&gt;
  <div class="one" /&gt;
  <div class="two" /&gt;
  <div class="three" /&gt;
</div&gt;
```

This is wrapping everything into one div:

```$('.one, .two, .three').wrapAll('<div class="wrap" /&gt;')
```

How can I get the groups wrapped separately?

Comment: so each set of div.one div.two div.three needs to be wrapped in div.wrap?

Here is the accepted answer: ```$(function(){
    var all = $('.one, .two, .three');
    for(i=0; i<all.length; i+=3){
        all.slice(i,i+3).wrapAll('<div class="wrap" /&gt;');
    }
});
```

See it in action: http://jsbin.com/uqosa/

By the way, ```<div class="one" /&gt;``` didn't work for me on Firefox, I had to close them with ```</div&gt;```.


Here is another answer: This will work:

```$(function() {
    var $ones = $('div.one');
    var $twos = $('div.two');
    var $threes = $('div.three');

    $ones.each(function(idx) {
        $('<div class="wrap"&gt;</div&gt;')
            .append($ones.eq(idx))
            .append($twos.eq(idx))
            .append($threes.eq(idx))
            .appendTo('body');
    });
});
```


Here is another answer: Try this:

```$('div.one').each(function() {
    var wrap = $(this).wrap('<div class="wrap"&gt;</div&gt;').parent();
    wrap.next('div.two').appendTo(wrap);
    wrap.next('div.three').appendTo(wrap);
});
```


Here is another answer: In my head this should work:

```$('.one').each(function() {
    var wrap = $('<div&gt;').addClass('wrap'), two = $(this).next(), three = $(two).next();
    $(this).after(wrap).appendTo(wrap)
    two.appendTo(wrap), three.appendTo(wrap)
});
```

Comment for this answer: Updated my answer a few times.

Here is another answer: ```$.fn.matchUntil = function(expr) {
    var match = [];
    this.each(function(){
        match = [this];
        for ( var i = this.nextSibling; i; i = i.nextSibling ) {
            if ( i.nodeType != 1 ) { continue; }
            if ( $(i).filter(expr).length &gt; 0 ) { break; }
            match.push( i );
        }
    });
    return this.pushStack( match );
};
```

usage:

```$(".one").each( function() {
    $(this).matchUntil(".one").wrapAll("<div class='wr'&gt;</div&gt;");
})
```

it's just modified version of http://docs.jquery.com/JQuery_1.2_Roadmap#.nextUntil.28.29_.2F_.prevUntil.28.29, which doesn't seem to work with new jQuery.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 5, 'CommentCount': 1, 'ContentLicense': 'CC BY-SA 2.5', 'CreationDate': '2009:00:10/06/09', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><html>', 'Title': 'wrapAll jQuery problem', 'ViewCount': 2358, 'id': 1527944, 'user_AboutMe': '', 'user_AccountId': 59291.0, 'user_DisplayName': 'Dom', 'user_Reputation': 3106.0, 'user_Views': 292.0, 'user_id': 177435.0}}