wrapAll jQuery问题

Question

我需要将三个div包装成一个，但这组三个div在代码中重复了几次。也许我的HTML会解释：

<div class="one" />
<div class="two" />
<div class="three" />

<div class="one" />
<div class="two" />
<div class="three" />

我想要实现的是：

<div class="wrap">
  <div class="one" />
  <div class="two" />
  <div class="three" />
</div>

<div class="wrap">
  <div class="one" />
  <div class="two" />
  <div class="three" />
</div>

这是将所有内容封装到一个div中：

$('.one, .two, .three').wrapAll('<div class="wrap" />')

如何将组分开包装？

Answer 1

$(function(){
    var all = $('.one, .two, .three');
    for(i=0; i<all.length; i+=3){
        all.slice(i,i+3).wrapAll('<div class="wrap" />');
    }
});

将其付诸实践：http://jsbin.com/uqosa/

顺便说一句，我在火狐上不能使用<div class="one" />，我不得不用</div>来关闭它们。

Answer 2

试试这个：

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

Answer 3

这将会起作用：

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

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