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

How to wrap x number of nested items with jQuery?

本文关键字：嵌套 项目 包装 何使用 jQuery      更新时间：2023-09-26

我有一个嵌套项目列表：

<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>

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

用div 包装 li 是无效的 html。但是，您可以尝试此操作。给你的顶级UL一个ID并使用下面的代码

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