在div周围环绕<li>标签[重复]

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 中创建一个列表，每三个 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