如何使用jQuery根据标题自动生成菜单/内容？

Question

在包含一些信息的基本XHTML文档中，我希望有一个“快速跳转”类型的菜单，以便能够快速转到相关部分。

这是一个静态的XHTML文档，所以我想要所有的浏览器，而不是服务器完成的动态内容。我想jQuery是要走的路。

我已经看过jQuery UI的东西，手风琴是我能找到的最接近的东西，但我不想让这些部分崩溃 - 我希望显示所有内容，只是一个浮动的内容/菜单。

从这：

<h2>Section 1</h2> 
<p>Some information</p> 
<h2>Section 2</h2> 
<p>More great info</p> 

我想产生类似：

<ul id="menu"> 
    <li><a href="#section1">First section</a></li> 
    <li><a href="#section2">Another section</a></li> 
</ul> 
<a name="section1"><h2>First section</h2></a> 
<p>Some information</p> 
<a name="section2"><h2>Another section</h2></a> 
<p>More great info</p> 

我不介意包裹在一个类或类似的一个div每个单独的部分，但会就像过程尽可能自动化一样，所以我只需要在修改文档时更改实际内容。

任何想法？

感谢，F.

Answer 1

如果你想只能够调用一个函数来自动创建包装，你可以做这样的事情：

<ul id="menu"></ul> 
<div id="sectionInfo"></div> 

function addSection(name, anchor, info) { 
    $("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>"); 
    $("#sectionInfo").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>"); 
} 

的HTML定义了容器的部分，那么函数本身会将内容添加到您想要的包装中。这对于简单的文本很适用，但是如果你的部分信息也包含HTML，它可能会有点混乱。在这种情况下，您可能需要考虑将部分及其信息存储在数据库中。

用法：

addSection("First section", "section1", "Some information with great content"); 

编辑

然后，您可以扩展这个时候它的加载自动调用这个“Addsection的”功能遍历文档。

您需要定义具有更刚性结构的部分，以便更易于遍历。我建议是这样的：

<ul id="menu"></ul> 
<div id="content"></div> 

<div id='sections' style='display:none;'> 
    <div> 
     <h2>Section 1</h2> 
     <p>Some information</p> 
    </div> 
    <div> 
     <h2>Section 2</h2> 
     <p>More great info</p> 
    </div> 
</div> 

然后，一旦加载页面时，通过定义的部分和循环调用Addsection的（），其将他们的内容到你希望它是什么样子永远

<script> 
    $(document).ready(function() { 
     $("#sections div").each(function() { 
      addSection($(this).find("h2").first().html(), $(this).find("p").first().html()); 
     }); 
    }); 

    function addSection(name, info) { 
     var anchor = name.replace(/ /g,''); 
     $("#menu").append("<li><a href='" + anchor+ "'>" + name + "</a></li>"); 
     $("#content").append("<a name='" + anchor + "'><h2>" + name + "</h2></a><p>" + info + "</p>"); 
    } 
</script> 

此代码未经测试，但该概念应起作用。您可以通过移动元素而不是复制它们的HTML来提高效率。

Answer 2

听起来就像您正在寻找一段JavaScript，它会根据选择器的结果生成内容。不需要任何幻想来完成，或者：

function buildSectionAnchorElement(index, heading) { 
 
    var a = $("<a>"); 
 
    var name = "section" + index; 
 
    $(heading).attr("name", name); 
 
    a.attr("href", "#"+name); 
 
    a.text($(heading).text()); 
 
    return a; 
 
} 
 
var headings = $("h1,h2,h3,h4"); 
 
var sections = headings.map(function(i,e) { 
 
    var a = buildSectionAnchorElement(i,e); 
 
    var p = $(e).next("p"); 
 
    var li = $("<li>"); 
 
    li.append(a); 
 
    $("#menu").append(li); 
 
    return li; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id="menu"></ul> 
 

 
<h2>something special</h2> 
 
<p>lorem ipsum</p> 
 

 
<h2>different thing</h2> 
 
<p>dolor kismet aha bwaha</p>