幫助建立一個與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>