Как автоматически добавить з заголовкам якоря?

Question

[Mixa]

Хочу добавить на сайт функционал автоматического создания содержания из заголовков, используемых на страницах. Есть ли какой-то скрипт, который может найти в документе все h1-h4 и автоматически подобавлять к ним якоря (типа )? Возможно, кто-то сталкивался с уже готовыми реализациями подобного функционала?

Answer 1

[Boris Köln]

$('h1')

Update:
$(':header')
api.jquery.com/header-selector

Comments

[Евгений Вольф]

Я бы немного уточнил, $('h1, h2, h3, h4') :D

[Александр]

Я бы уточнил $(':header')

[Mixa]

Boris Korobkov, Евгений Вольф, Александр Спасибо! Только я так и не понял, как организовать вставку самих якорей, чтобы обходчик по нарастающей считал и добавлял соответсвующий номер в ссылку? В сторону какой функции смотреть?

[Boris Köln]

api.jquery.com
Как вставить в DOM - см. ссылку "manipulation".
Как считать - надо начать изучение программирования с азов: что такое переменная, массив, функция, область видимости и пр.

[Mixa]

Boris Korobkov: спасибо. все, что вы перечислили, как бы есть. просто именно с jquery нет опыта работы. спасибо вам за советы

[Евгений Вольф]

Mixa: если у Вас вопрос ещё актуален - напишите пример кода на каком-нибудь CodePen. Не знаю как остальные, но мне до конца сложно понять Вашу задачу "целиком".

[Mixa]

Евгений Вольф: да нечего собственно пока писать. просто есть вот например страница с обычиным html:

<div class="content">
<h1>Заголовок 1</h1>
<p>абзац текста</p>
<h1>Заголовок 2</h1>
<p>абзац текста</p>
</div>

задача - получать автоматически такой код:

<div class="content">
<h1><a name="#1"></a>Заголовок 1</h1>
<p>абзац текста</p>
<h1><a name="#2"></a>Заголовок 2</h1>
<p>абзац текста</p>
</div>

[Евгений Вольф]

Mixa: добавить внутрь заголовков ссылки с пронумерованными якорями?

[Mixa]

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

[Евгений Вольф]

Mixa: пожалуйста, рабочий пример кода

[Mixa]

Евгений Вольф: Огромное вам спасибо! Жаль, нельзя комментарий отметить решением. Если продублируете ответом - отмечу решением.

P.S. Нашел еще одну реализацию, интересно будет теперь самому скомбинировать. Еще раз спасибо!

[Евгений Вольф]

Mixa: не за что, обращайтесь при случае! :)

P.S. Вы можете самостоятельно написать ответ и отметить его решением, если хотите, я не гонюсь за "плюсиками" :)