Javascript 使用Jquery在列表中包装多个级别的头（H1H2H3）

我是JS和Jquery新手，希望得到以下问题的帮助

我在一个页面上在线编写了一个简单的用户指南，有3个级别的标题-h1、h2、h3 all-in标记。 我想在我的页面上使用Jquery动态生成一个侧导航栏，显示我的所有标题（h1、h2和h3），这些标题嵌套在UL列表格式中，如下所示

<ul class = “nav nav-stacked fixed”>
  <li> <a class= '.h1'></a>
    <ul class= “nav nav-stacked”>
        <li> <a class ='.h2'></a>
             <ul class = “nav2 nav-stacked”>
                <li><a class= '.h3'></a> </li>
             </ul>
        </li>
    <ul>
</li> </ul>

目前我已经编写了以下Jquery

$('#sidebar a.h1').wrap('<ul class="nav nav-stacked"><li></li></ul>').addClass('nav nav-stacked');
 $('#sidebar a.h2').wrap('<ul><li><ul class="nav2 nav-stacked"><li></li></li></ul></ul>').addClass('nav2 nav-stacked');
  $('#sidebar a.h3').wrap('<ul><li><ul><li><ul class="nav3 nav-stacked"><li></li></ul></li></li></ul></ul>').addClass('nav3 nav-stacked');});

$（“#侧栏a.h1”）.wrap（“
”）.addClass（'nav nav stacked'）；
$（“#侧栏a.h2”）.wrap（“
）.addClass（'nav2 nav stacked'）；
$（“#侧边栏a.h3”）.wrap（“
>）.addClass（
）.addClass（

然而，结果并不是一次返回所有的a.h1、a.h2、a.h3，而是分别列出它们

任何指导或帮助都将不胜感激。 谢谢

您的html是

。这里的课堂上不应该有

。它应该类似于

您的完整html如下所示：

<ul class="nav nav-stacked fixed">
    <li>
        <a class='h1'></a>
        <ul class="nav nav-stacked">
            <li>
                  <a class='h2'></a>
                  <ul class="nav2 nav-stacked">
                      <li><a class='h3'></a></li>
                  </ul>
            </li>
        </ul>
    </li>
</ul>

是的，谢谢你的来信。但是，你能帮我写Jquery吗？我正在努力编写Jquery，它将以你刚才描述的格式包装所有HTML标题（h1 h2 h3）。一旦你更新了HTML，你写的Jquery代码就会很好地工作。