帮助使用 jquery 构建部分导航菜单答案

【问题标题】：help building a section nav menu with jquery帮助使用 jquery 构建部分导航菜单
【发布时间】：2009-02-20 22:04:25
【问题描述】：

我真的可以使用一些帮助来解决我的感觉将是一些非常基本的 jquery，但我还是被困住了。

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

我想要做的是为每个 div.page 添加一个 id，然后为每个 div.page 填充一个 id 为 menu 的 ul，每个 div.page 包含一个 href 值为 #page_n 的锚点（即其对应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>

我添加 id 没关系：

$('li.page').each(function(index){$(this).attr("id", "page_" + (index+1));
    });

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

感谢您的任何帮助...在此先感谢...

【问题讨论】：

我想你的意思是 $('div.page').each

标签： javascript jquery

【解决方案1】：

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

<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></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);
    });
});

将使您的 HTML 看起来像这样：

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

【讨论】：