尝试创建一个导航菜单，其中包含每个菜单的链接 页面上的标题[关闭]

Question

我正在尝试使用jQuery创建一个导航菜单，其中包含在Wordpress中创建和发布的页面上每个<h2>标题的链接。其中一些页面可能会有点冗长，因此这个导航菜单应该让访问者可以快速轻松地跳转到其内容的某些部分。

我已经设置了这个，以便每个<h2>标题创建它自己的唯一ID，使用它的内容前缀为“＃”（即“我的标题”将获得ID“#My title”）使用下面这段代码：

jQuery("h2").each(function(){
      var id = jQuery(this).html();
      jQuery(this).attr("id", "#" + id);
})

基本上是第1步（共10步）。剩下的就是创建一个循环通过页面上存在的每个<h2>的函数，然后为每个标题创建一个菜单项。我有点理解javascript循环，但我不知道如何让它实际创建像这样的新元素。

当它归结为Javascript甚至jQuery时，我仍然是一个新手，所以如果有什么不清楚我会道歉。

无论如何，我希望有人能指出我正确的方向。任何帮助将非常感激。

Answer 1

根据我的理解，我猜你正在尝试在页面顶部创建一个导航菜单，它会创建指向每个<h2>子标题的链接。

我真的不知道wordpress是如何工作的，但是有一些方法可以在jquery中实现：

您应该将<h2>元素存储在数组中。您可以通过在制作时添加ID来完成此操作。你不需要循环！ （另外，如果我是你，我不会在ID之前添加＃，因为当你尝试在javascript或css中调用ID时，你必须写“## name”。）

var arr = [];
$("h2").each(function(){
    var id = $(this).html();
    $(this).attr("id", id);
    arr.push($(this).attr('id'));
});

现在您已拥有<h2>元素的数据，您可以循环浏览它以创建列表。首先，只需在javascript中创建一个空的<ul id="nav"></ul>。然后，你可以继续添加<li></li>与h2内容。要添加链接，您只需使用<a href='#name'></a>环绕文本。

所以它会是这样的：

for (i in arr) {
  $('ul#nav').append('<li><a href="#' + arr[i] + '">' + arr[i] + '</a></li>');
}

您当然可以使用css来设置无序列表的样式，它可以用作导航。我希望有所帮助！