javascript - 将 标签包裹在 div 周围

Question

这个问题已经有答案了:

Wrap every 3 divs in a div (6 个回答)

已关闭 8 年前。

目前，我将一系列 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 ++;
});   

如果有人可以提供 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