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开头和结尾，所以你应该修复它然后再问这个问题。

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()封装它们，如下所示：

$(".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>

You can test it out here，但您可以在原始<ul>，display: block上使用样式获得所需的效果。

使用Jquery将第一级“li”标签包装到一个div中

2 个答案: