Question

我遇到了一个特殊问题。在我的“单页”网站上，我将内容拆分为几个div，例如“议程”，“事件”，“位置”等。我需要一个从该ID生成导航的JavaScript，如下所示：

HTML

 <div class="navi">
        <ul>
            <li><a >Item 1 (Suppost to be Agenda)</a></li>
            <li><a >Item 2 (Suppost to be Event)</a></li>
            <li><a >Item 3 (Suppost to be Location)</a></li>
        </ul>
    </div>
    <div id="content">
        <div id="Agenda">
            Content item 1
        </div>
        <div id="Event">
            Content item 2
        </div>     
        <div id="Location">
            Content item 3
        </div>

    </div>

http://jsfiddle.net/RDFf9/1/

但我不知道如何。

Answer 1

您可以使用以下内容;

$("#content div").each(function() {
   $(".navi ul").append('<li><a href="#'+ $(this).attr("id") + '">' + $(this).attr("id") + '</a></li>');
});

以下是一个有效的演示： jsfiddle

Answer 2

这很简单：

循环显示要为
对于其中每个项目，请在菜单中添加一个条目

我已经使用vanilla JavaScript示例更新了您的Fiddle，但您可以了解这在jQuery中的工作原理。

这是JavaScript：

var menu = document.getElementById("nav");
var contentContainer = document.getElementById("content")
var contentEntries = contentContainer.children;

for(var i = 0; i < contentEntries.length; i++){
    var menuEntry = document.createElement("li");
    var link = document.createElement("a");
    link.innerText = contentEntries[i].id;
    menuEntry.appendChild(link);
    menu.appendChild(menuEntry);    
}

拿ID并将它们放入带有jQuery的anker导航中

HTML

2 个答案: