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

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

这是一个静态XHTML文档，所以我希望所有动态内容都由浏览器完成，而不是服务器。我认为jQuery是一条出路

我看过jQueryUI的东西，手风琴是我能找到的最接近的东西，但我不希望这些部分被折叠掉——我希望所有的内容都显示出来，只有一个浮动的内容/菜单

由此：

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

第1节
一些信息

第二节
更多精彩信息

我想制作一些类似于：

<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.

如果您只想调用一个函数来自动创建包装器，您可以执行以下操作：

<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>");
}

<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”函数

您需要使用更为刚性的结构定义截面，以便更容易进行遍历。我建议这样做：

<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>");
}

<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>

$（文档）.ready（函数（）{
$（“#节分区”）。每个（函数（）{
addSection（$（this.find（“h2”）.first（）.html（），$（this.find（“p”）.first（）.html（））；
});
});
函数addSection（名称、信息）{
var anchor=name.replace（//g'，）；
$（“#菜单”）。追加（“
”）；
$（“#内容”）。追加（“+name+”“+info+”
”）；
}

---

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

如果您只想调用一个函数来自动创建包装器，您可以执行以下操作：

<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>");
}

<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”函数

您需要使用更为刚性的结构定义截面，以便更容易进行遍历。我建议这样做：

<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>");
}

<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>

$（文档）.ready（函数（）{
$（“#节分区”）。每个（函数（）{
addSection（$（this.find（“h2”）.first（）.html（），$（this.find（“p”）.first（）.html（））；
});
});
函数addSection（名称、信息）{
var anchor=name.replace（//g'，）；
$（“#菜单”）。追加（“
”）；
$（“#内容”）。追加（“+name+”“+info+”
”）；
}

---

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

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

函数buildSectionAnchoreElement（索引、标题）{
变量a=$（“”）；
var name=“section”+索引；
$（标题）.attr（“名称”，名称）；
a、 属性（“href”，“#”+名称）；
a、 文本（$（标题）.text（））；
返回a；
}
风险值标题=$（“h1、h2、h3、h4”）；
var sections=headers.map（函数（i，e）{
var a=建筑节锚固构件（即e）；
var p=$（e）.下一个（“p”）；
var li=$（“
”）；
li.附加（a）；
$（“#菜单”）。追加（li）；
返回李；
});


特别的东西
同侧眼睑

不同的东西
dolor kismet aha bwaha
听起来像是在寻找一段JavaScript，它根据选择器的结果生成内容。也不需要任何幻想来完成：


函数buildSectionAnchoreElement（索引、标题）{
变量a=$（“”）；
var name=“section”+索引；
$（标题）.attr（“名称”，名称）；
a、 属性（“href”，“#”+名称）；
a、 文本（$（标题）.text（））；
返回a；
}
风险值标题=$（“h1、h2、h3、h4”）；
var sections=headers.map（函数（i，e）{
var a=建筑节锚固构件（即e）；
var p=$（e）.下一个（“p”）；
var li=$（“
”）；
li.附加（a）；
$（“#菜单”）。追加（li）；
返回李；
});


特别的东西
同侧眼睑

不同的东西
dolor kismet aha bwaha
谢谢，但挑战在于如何让jQuery（或只是带DOM的纯js）遍历文档，在部分和菜单中的链接上生成锚名称。您的addSection（）建议仍然需要我（程序员）了解文档的内容。更新了我的答案，以显示如何自动调用它。谢谢，但挑战在于如何让jQuery（或只是带DOM的纯js）遍历文档，在节和菜单中的链接上生成锚定名称。您的addSection（）建议仍然需要我（程序员）了解文档的内容。更新了我的答案以显示如何自动调用它。当然，这个简单的脚本假定内容的格式一致，不进行错误检查，等等。。。它也可能是refac