Javascript 尝试创建一个导航菜单，其中包含指向每个<；h2>；书名

我正在尝试使用jQuery创建一个导航菜单，其中包含在Wordpress中创建和发布的页面上指向每个

标题的链接。有些页面可能会有点长，所以这个导航菜单应该可以让访问者快速轻松地跳转到内容的某些部分

我已经设置好了它，这样每个

标题都可以使用前缀为“#”的内容创建自己的唯一ID（即“我的标题”将使用下面的代码获得ID“#我的标题”）：

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

基本上是第1步，共10步。。剩下的就是创建一个函数，在页面上存在的每个

之间循环，然后为每个标题创建一个菜单项。我有点理解javascript循环，但我不知道如何让它真正创建这样的新元素

说到Javascript甚至jQuery，我还是个新手，所以如果有什么不清楚的地方，我道歉

---

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

据我所知，我猜您正在尝试在页面顶部创建一个导航菜单，在该菜单中创建指向每个

副标题的链接

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

您应该将

元素存储在数组中。您可以通过在创建id时添加id来实现这一点。你不需要一个循环！（另外，如果我是你，我不会在ID前面加上#，因为当你试图用javascript或css调用ID时，你必须写上“##name”。）

既然您已经有了

元素的数据，您就可以通过循环创建列表了。首先，只需在javascript中创建一个空的

。然后，您可以继续在其中添加包含h2内容的

。要添加链接，只需在文本周围加一个

所以结果是这样的：

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

用于（arr中的i）{
$（'ul#nav'）。追加（'li>'）；
}

当然，您可以使用css来设置无序列表的样式，它可以用作导航。

---

我希望这有帮助

谢谢Natsu这么清晰的解释，它很有效！这正是我想要的。非常感谢您在这里对我的帮助。以这种方式使用

jQuery（this）.html（）

是个坏主意。您至少应该使用

.text（）

，因为您不需要

的HTML内容，而是需要文本。但是，即使这样，您也需要对其进行清理，使其仅包含

id

中有效的字符。

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