在 <li> div 周围环绕标签

Question

目前，我有一个9个div的序列加载到一个容器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。因此我想要的结果如下：

<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 ++;
});   

如果有人能提供一个解决方案，我将非常感谢。

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>>");

工作演示