如何將每四個元素包裝在一個 <li> 用jQuery標記？

Question

我需要將每4個.product div換行包裝在<li>標記內，以便在出現以下情況時：

<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個元素，然后使用.wrapAll()將前三個元素與當前的4n元素.wrapAll() ：

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

工作演示