помогите построить раздел меню навигации с помощью jquery

Question

Я мог бы действительно использовать некоторую помощь, что, как я чувствую, будет довольно простым jquery, но я все равно застрял.

У меня есть неизвестное (динамически генерируемое) число div в моем html, каждый с классом "page".

Что я хочу сделать, это добавить идентификатор для каждой страницы div.page, а затем заполнить ul идентификатором меню с li для каждой страницы div.page, содержащей привязку со значением href #page_n (т. е. значение идентификатора соответствующего div)

Я хочу, чтобы мой вывод выглядел так:

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

Я добавляю идентификатор в порядке с:

$('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>