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

我只需要将属于列表第一级的<li>标记（包含“ header 1”，“ header 2” ...及其所有子项）包装到一个div中。

结果应为：

 <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开头和结尾，因此您可能应该解决该问题，然后再问这个问题。

Answer 2

首先，让我们从有效的HTML开始，如下所示：

<ul class="catalog">
   <li>header 1
      <ul>
        <li>subcat 1
            <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>header 2
      <ul>
        <li>subcat 4</li>
        <li>subcat 5</li>
        <li>subcat 6</li>
      </ul>
    </li>
</ul>​

然后使用.wrapAll()将它们.wrapAll()帽，如下所示：

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

这样会生成有效的HTML，如下所示：

<ul class="catalog">
  <li>
    <div class="something">
      <ul>
        <li>header 1
          <ul>
            <li>subcat 1
                <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>header 2
          <ul>
            <li>subcat 4</li>
            <li>subcat 5</li>
            <li>subcat 6</li>
          </ul>
        </li>
      </ul>
    </div>
  </li>  
</ul>

您可以在此处进行测试 ，尽管您可以通过在原始的<ul> display: block样式来获得所需的效果 ，例如display: block 。