Question

我有一个嵌套项目列表：

<ul>
  <li>Item A
    <ul>
      <li>Item A1</li>
      <li>Item A2</li>
      <li>Item A3</li>
      <li>Item A4</li>
    </ul>
  </li>
  <li>Item B</li>
  <li>Item C</li>
  <li>Item D</li>
  <li>Item E</li>
  <li>Item F</li>
  <ul>
    <li>Item F1</li>
    <li>Item F2</li>
    <li>Item F3</li>
  </ul>
  </li>
  <li>Item G</li>
  <li>Item H</li>
</ul>

问题是我需要将每4个项目包装在一个容器中：

<ul>
  <div>
    <li>Item A
      <ul>
        <li>Item A1</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
      </ul>
    </li>
    <li>Item B</li>
    <li>Item C</li>
    <li>Item D</li>
  </div>
  <div>
    <li>Item E</li>
    <li>Item F</li>
    <ul>
      <li>Item F1</li>
      <li>Item F2</li>
      <li>Item F3</li>
    </ul>
    </li>
    <li>Item G</li>
  </div>
</ul>

当我尝试根据列表项的数量进行操作时，它也会计算孩子们的数量。此外，如果最后一组少于四，我仍然需要包含它。我找到的每个例子都使用一个简单的列表而不是嵌套列表，因此它们的示例不起作用。

Answer 1

使用div包装li是无效的html。但是，你可以试试这个。给你的顶级ul一个id并使用下面的代码

while ($("#test > li").length >0 ){
  $("#test > li").slice(0, 4).wrapAll("<div/>") ;
}

如何用jQuery包装x个嵌套项？

1 个答案: