javascript - 如何使用 jQuery 包装 x 个嵌套项目？

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。不过，你可以尝试这个。给你的 top ul 一个 id 并使用下面的代码

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