jQueryラップ2 divオブジェクト内の新しいdiv

Question

私は2つのdivオブジェクトを持っています。それらを別のdiv内にどのようにラップできますか？私はちょうど$('.one, .two, .three').wrapAll('<div class="wrap">')を使用することはできません。なぜならすべての小さなボックスは動的で、それらの複数のものがあるからです。私は1つに2つだけを包み込みたい。

HTML：

<div class="grid"> 
    <div class="grid-item item1"></div> 
    <div class="grid-item item2 small-box"></div> 
    <div class="grid-item item3 small-box"></div> 
    <div class="grid-item item4"></div> 
    <div class="grid-item item2 small-box"></div> 
    <div class="grid-item item3 small-box"></div> 
</div> 

のjQuery：

function small_box_modify(){ 
    var $box = $('.grid > .grid-item'); 
    var $small_box = $('.grid > .small-box'); 
    $small_box.each(function (index) { 
     var $this = $(this); 
     if($this.hasClass('small-box')){ 
      var $nxt = $this.next('.grid-item'); 
      if($nxt.hasClass('small-box')){ 
       // here I want to wrap "$this" and "$nxt" inside new div 
       // $($this, $nxt).wrapAll('<div class="wrapper">'); 
      } 
     } 
    }); 
} 

RESULTのHTML：あなたはこのように使用することができます

<div class="grid"> 
    <div class="grid-item item1"></div> 
    <div class="wrapper"> 
     <div class="grid-item item2 small-box"></div> 
     <div class="grid-item item3 small-box"></div> 
    </div> 
    <div class="grid-item item4"></div> 
    <div class="wrapper"> 
     <div class="grid-item item2 small-box"></div> 
     <div class="grid-item item3 small-box"></div> 
    </div> 
</div> 

Answer 1

：

if($nxt.hasClass('small-box')){ 
    // here I want to wrap "$this" and "$nxt" inside new div 
    for(var i = 0; i < $nxt.length; i+=2) { 
    $($this).add($nxt).wrapAll("<div class='wrapper' />"); 
    } 
} 

Answer 2

ます。また、このようにそれを行うことができます。

var $set = $('div.grid > .small-box'); 
for(var i=0, len = $set.length; i < len; i+=2){ 
    $set.slice(i, i+2).wrapAll('<div class="wrapper"/>'); 
}