如何用jquery包装<li>标签中的每4个元素？

Question

我需要.product在<li>标签内连续包装每4个div,以便在以下时间:

<ul>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
  <div class="product">...</div>
</ul>

它变成了:

<ul>
  <li>
    <div class="product">...</div>
    <div class="product">...</div>
    <div class="product">...</div>
    <div class="product">...</div>
  </li>
  <li>
    <div class="product">...</div>
    <div class="product">...</div>
  </li>
</ul>

在这个例子中我给了6个产品,因为它必须关闭包装,如果这些是最后的元素.

你能告诉我这是怎么做到的jquery吗？

Answer 1

您可以使用for循环遍历每个第4个元素,然后使用以下内容将3个前面的元素与当前的4n元素一起包装.wrapAll():

var productdivs = $("ul .product");
for(var i = 0; i < productdivs.length; i+=4) {
  productdivs.slice(i, i+4).wrapAll("<li></li>");
}

工作演示