Javascript 使用jquery帮助构建区段导航菜单

我真的需要一些帮助，我觉得这将是一些非常基本的jquery，但我还是被卡住了

我的html中有未知数量（动态生成）的div，每个div都有一个“page”类

我要做的是为每个div.page添加一个id，然后为每个div.page（包含一个href值为#page _n的锚定）在ul中填充一个带有li的菜单id （即对应div的id值）

我希望我的输出如下所示：

<div class="page" id="page_1">
...content...
</div>

<div class="page" id="page_2">
...content...
</div>

.....

<div class="page" id="page_n">
...content...
</div>


<ul #menu>
    <li><a href="#page_1">Page 1</a></li>
    <li><a href="#page_2">Page 2</a></li>
.....
    <li><a href="#page_n">Page n</a></li>
</ul>

<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>

<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
</ul>

但我正在努力解决问题的第二部分。我知道这可能有点基本，但我才刚刚开始

---

感激地接受任何帮助。。。提前感谢…

如果您的HTML最初看起来像这样：

<div class="page" id="page_1">
...content...
</div>

<div class="page" id="page_2">
...content...
</div>

.....

<div class="page" id="page_n">
...content...
</div>


<ul #menu>
    <li><a href="#page_1">Page 1</a></li>
    <li><a href="#page_2">Page 2</a></li>
.....
    <li><a href="#page_n">Page n</a></li>
</ul>

<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>

<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
</ul>

。。。
...
...

此jQuery代码：

$(document).ready(function() {
    $('div.page').each(function(i) {
        var x = i+1;
        var id = 'page_' + x;
        $(this).attr('id', id);
        var li = $('<li/>').append(
            $('<a/>').attr('href', '#' + id).html('Page ' + x)
        );
        $('#menu').append(li);
    });
});

$（文档）.ready（函数（）{
$（'div.page'）。每个（函数（i）{
var x=i+1；
变量id='第页'+x；
$（this.attr（'id'，id）；
变量li=$（'
'）。追加(
$（'

如果您的HTML最初看起来像这样：

<div class="page" id="page_1">
...content...
</div>

<div class="page" id="page_2">
...content...
</div>

.....

<div class="page" id="page_n">
...content...
</div>


<ul #menu>
    <li><a href="#page_1">Page 1</a></li>
    <li><a href="#page_2">Page 2</a></li>
.....
    <li><a href="#page_n">Page n</a></li>
</ul>

<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>

<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
</ul>

。。。
...
...

此jQuery代码：

$(document).ready(function() {
    $('div.page').each(function(i) {
        var x = i+1;
        var id = 'page_' + x;
        $(this).attr('id', id);
        var li = $('<li/>').append(
            $('<a/>').attr('href', '#' + id).html('Page ' + x)
        );
        $('#menu').append(li);
    });
});

$（文档）.ready（函数（）{
$（'div.page'）。每个（函数（i）{
var x=i+1；
变量id='第页'+x；
$（this.attr（'id'，id）；
变量li=$（'
'）。追加(
$（'

我想你指的是美元（'div.page'）。每个人都认为你指的是美元（'div.page'）