帮助建立一个与jQuery的部分导航菜单

Question

我真的可以使用一些帮助，我有一种感觉会是一些非常基本的jQuery，但我都卡住了。

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

我想要做的是为每个div.page添加一个id，然后用包含锚的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)); 
    }); 

但我与挣扎秒我的问题的一部分。我知道这可能是有点基本的，但我刚刚开始....提前

感激地收到任何帮助...谢谢...

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>