javascript - 帮助使用 jquery 构建部分导航菜单

Question

我确实需要一些帮助，我感觉这将是一些非常基本的 jquery，但我仍然被困住了。

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

我想要做的是为每个div.page添加一个id，然后为每个包含href值为#page_n的 anchor 的div.page填充一个带有li的菜单id的ul(即其对应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));
    });

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

非常感谢您提供的任何帮助...提前致谢...

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