jQuery將新div中的2個div對象包裝起來

Question

我有2個div對象。我如何將這些包裹在另一個div中？我不能只使用$('.one, .two, .three').wrapAll('<div class="wrap">')，因爲所有的小盒子都是動態的，可以有多個。我只想將其中的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">'); 
      } 
     } 
    }); 
} 

結果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"/>'); 
}