缠绕的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