javascript - 使用Jquery将第一级 "li"标签包装成一个div

Question

假设我们有一个如下所示的多级 html 列表:

<ul class="catalog">
  <li>
    <ul>
      <li>
        <ul>
          <li>subcat subcat 1</li>
          <li>subcat subcat 2</li>
          <li>subcat subcat 3</li>
        </ul>
      </li>
      <li>subcat 2</li>
      <li>subcat 3</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>subcat 4</li>
      <li>subcat 5</li>
      <li>subcat 6</li>
    </ul>
  </li>

</ul>

我只需要包装成一个div <li>属于列表第一层的标记(hamed“header 1”、“header 2”...及其所有子项)。

结果应该是:

<ul class="catalog">
  <div class="myWrapper">
    <!-- Added by JQuery -->
    <li>
      <ul>
        <li>
          <ul>
            <li>subcat subcat 1</li>
            <li>subcat subcat 2</li>
            <li>subcat subcat 3</li>
          </ul>
        </li>
        <li>subcat 2</li>
        <li>subcat 3</li>
      </ul>
    </li>
    <li>
      <ul>
        <li>subcat 4</li>
        <li>subcat 5</li>
        <li>subcat 6</li>
      </ul>
    </li>

  </div>
  <!-- Added by JQuery -->

</ul>

我试过了 wrap()功能，但没有按预期工作

关于如何完成这项工作有什么想法吗？

Answer 1

$('.catalog > li').wrapAll('<div class="wrapper"></div>');

但是您开始和结束时都使用严重无效的 HTML，因此您可能应该解决这个问题，然后再问这个问题。