Генератор оглавления страницы
Полезный функционал, не знаю как оптимально решить.
Есть div в котором находится некий контент страницы состоящий из h1..h2, p, ul, ol, li, a, img, table и т.д. То есть обычная веб-страница. Нужно разобрать все заголовки в диве и сформировать оглавление (как, например, делает word для многостраничного документа). Соответственно заголовкам присваиваются якоря (по порядковому номеру в иерархии) и генерируется дополнительный слой содержащий оглавление в виде дерева с ссылками на соответствующие заголовки. Таким образом можно создавать автоматическое оглавление страницы, по примеру как сделано, например на бутстрапе. Возможно есть уже готовые скрипты, но я что-то не нашел. Не понимаю как сформировать запрос. |
Цитата:
$('h1, h2, h3, h4') Пройтись по элементам и меню готово... |
Я имею ввиду, не знаю как правильно спросить у гугля. На запрос "генератор оглавления страницы на javascript" выходит всякая туфта и т.д.
Нужно не только просканировать заголовки, но и дописать для них анкоры (согласно дерева) |
Цитата:
Цитата:
|
Цитата:
|
Цитата:
|
На странице присутствуют два дива, один с html-контентом, второй – в который будет сливаться оглавление.
Скрипту скармливаются id обоих. Скрипт проходит подряд все заголовки до третьего уровня, добавляет перед ними якорь с идентификатором по порядку следования и, по сути, дублирует во второй див копию заголовков контента помещенных в ссылки, указывающие на соответствующие якоря. Как присвоить якоря ссылкам, я, в принципе, придумал. Не знаю, как собрать сведения о заголовках и как их потом передать во второй див. !function ($) { $(function () { var c = 1; $('h1, h2, h3').each(function () { var h = $(this) h.before("<a id='" + c + "'></a>"); c++; }); }); }(window.jQuery); |
$(function () { var index = 1; $('h1, h2, h3').each(function () { $(this).before("<a id='" + index + "'></a>"); $(this).clone().appendTo("#second_div"); index++; }); }); Так, чтоли, нужно? |
Это очень близко, спасибо. У меня получилось вот так. Теперь буду допиливать:
var line, header, title, tag, link = 0; var pageContent = '<ul>'; $("h2, h3").each(function () { header = $(this); link++; header.before("<a id='par" + link + "'></a>"); title = header.text(); line = "<li><a href='#par" + link + "'>" + title + "</a></li>"; pageContent += line; }); pageContent += '</ul>'; $(".pageContent").prepend(pageContent); Вопрос в том, как правильно скормить тег источник и как сделать функцию библиотечной, чтобы вызывать только там где нужно. |
Можно так еще:
var list = $("<ul>"); //создание элемента ul. ... list.append($("<li>").append($("<a>").attr("href", link).html(title))); ... $(".pageContent").append(list); Цитата:
function myfunc(argument, second_argument) { alert(argument); alert(second_argument); }; myfunc(1, 2); //Вызов функции. Может быть где угодно. |
Часовой пояс GMT +3, время: 01:36. |