Question

我真的可以使用一些帮助，我的感觉会是一些非常基本的jquery，但我一直都是这样。

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

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

帮助用jquery构建一个部分导航菜单

1 个答案: