如何使用jquery将每4个元素包装在一个<li>标签中

How to wrap every 4 elements in a <li> tag with jquery?

本文关键字：一个 li 标签 将每 jquery 何使用 4个 元素 包装      更新时间：2023-09-26

我需要将每 4 个.productdiv 包装成一行，以便在 <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做到这一点吗？

您可以使用 for 循环遍历每 4 个元素，然后使用 .wrapAll() 将前 3 个元素与当前 4n 个元素一起包装：

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

工作演示

相关文章：