纏繞的div

Question

目前，我有裝入容器DIV 9個div的序列：

<div class="container"> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
    <div class="testdiv"></div> 
</div> 

我要實現與jQuery如下：製作一個清單出來的這些每隔三個div就有一個li元素。所以我想要的結果如下：

<div class="container"> 
     <ul> 
      <li> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      </li> 
      <li> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      </li> 
      <li> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      <div class="testdiv"></div> 
      </li> 
     </ul> 
</div> 

我已經試過了，但沒有成功

var target = $('.container'); 
var testdivs = $('.testdiv'); 
var counter = 0; 

target.prepend('<ul>'); 
target.append('</ul>'); 

testdivs.each(function() { 
    var currentDiv = $(this); 

    if (counter % 3 == 0) { 
    target.prepend('<li>'); 
    } 

    if ((counter+1) % 3 == 0) { 
    target.append('</li>'); 
    } 

    counter ++; 
}); 

如果有人可以提供一個解決方案，我會很感激這個的jsfiddle。

Answer 1

您可以使用：

var $div = $(".container div"); 
for (var i = 0; i < $div.length; i += 3) { 
    var $li = $("<li/>"); 
    $div.slice(i, i + 3).wrapAll($li); 
} 
$(".container").wrapInner("<ul></ul>>"); 

Working Demo