Question

我是JS和Jquery的新手，并且需要以下问题的帮助。

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

<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，a.h2，a.h3而是将它们分别列出

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

Answer 1

您的html是<a class= '.h1'></a>。这里的班级上不应有.。应该像<a class= 'h1'></a>。

您的完整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

1 个答案: