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

【问题标题】：Wrap first level of "li" tags into one div using Jquery使用 Jquery 将第一级“li”标签包装到一个 div 中
【发布时间】：2010-07-10 19:26:19
【问题描述】：

假设我们有一个看起来像这样的多级 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>标签（hamed“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() 功能，但没有按预期工作

对如何完成这项工作有任何想法吗？

【问题讨论】：

好吧，你可以这样做......但这不是有效的 HTML，你的最终目标是什么？
你的<ul>应该在<li>里面，就像这样：<li>header1 <ul> ...many li tags ...</ul></li><li>header2</li>
Nick Craver：我在 stackoverflow 上的第一篇文章，抱歉已修复
@volocuga - 我指的是标记 :) 你不能在 <ul> 中使用 <div>，<ul> 在 <ul> 中也是如此，它们必须是在孩子<li>
Nick Craver：你是对的，已编辑

标签： javascript jquery html tags html-lists

【解决方案1】：

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

但是你开始和结束时都使用了严重无效的 HTML，所以你应该解决这个问题，然后再问这个问题。

【讨论】：

【解决方案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 上进行样式设置来获得所需的效果。

【讨论】：