Генератор оглавления страницы

[Roman Koff]

Полезный функционал, не знаю как оптимально решить.

Есть div в котором находится некий контент страницы состоящий из h1..h2, p, ul, ol, li, a, img, table и т.д. То есть обычная веб-страница. Нужно разобрать все заголовки в диве и сформировать оглавление (как, например, делает word для многостраничного документа). Соответственно заголовкам присваиваются якоря (по порядковому номеру в иерархии) и генерируется дополнительный слой содержащий оглавление в виде дерева с ссылками на соответствующие заголовки.

Таким образом можно создавать автоматическое оглавление страницы, по примеру как сделано, например на бутстрапе.

Возможно есть уже готовые скрипты, но я что-то не нашел. Не понимаю как сформировать запрос.

[ksa]

Не понимаю как сформировать запрос

Как вариант, просто селектором

$('h1, h2, h3, h4')

Пройтись по элементам и меню готово...

[Roman Koff]

Я имею ввиду, не знаю как правильно спросить у гугля. На запрос "генератор оглавления страницы на javascript" выходит всякая туфта и т.д.

Нужно не только просканировать заголовки, но и дописать для них анкоры (согласно дерева)

[ksa]

не знаю как правильно спросить у гугля

Т.е. сам-то ничего делать и не собираешся?

Нужно не только просканировать заголовки, но и дописать для них анкоры

В том же проходе все и сделай...

[Roman Koff]

Т.е. сам-то ничего делать и не собираешся?

Не собирался бы -- не спрашивал бы. Фрилансеров полно... Хочу сам разобраться и потом допиливать до нужного функционала. Я не дружу с JS, а хотелось бы...

[ksa]

Хочу сам разобраться

Где тогда твои варианты решения? Где тестовый пример?

[Roman Koff]

На странице присутствуют два дива, один с html-контентом, второй – в который будет сливаться оглавление.

Скрипту скармливаются id обоих.

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

Как присвоить якоря ссылкам, я, в принципе, придумал. Не знаю, как собрать сведения о заголовках и как их потом передать во второй див.

!function ($) {
	$(function () {
		var c = 1;
		$('h1, h2, h3').each(function () {
			var h = $(this)
			h.before("<a id='" + c + "'></a>");
			c++;
		});
	});
}(window.jQuery);

[Erolast]

$(function () {
  var index = 1;
  $('h1, h2, h3').each(function () {
    $(this).before("<a id='" + index + "'></a>");
    $(this).clone().appendTo("#second_div");
    index++;
  });
 });

Так, чтоли, нужно?

[Roman Koff]

Это очень близко, спасибо. У меня получилось вот так. Теперь буду допиливать:

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

Вопрос в том, как правильно скормить тег источник и как сделать функцию библиотечной, чтобы вызывать только там где нужно.

[Erolast]

Можно так еще:

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); //Вызов функции. Может быть где угодно.