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

如果有人能为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

环绕divs <li>标签</li>

1 个答案: