1

Возможно ли прочитать в блоке заголовки? Пример кода:

<div class="cont">
    <h2>Заголовок</h2>
    <p>Текст</p>
    <h3 id="1">Заголовок 1</h3>
    <p>Текст</p>
    <p>Текст</p>
    <h3 id="2">Заголовок 2</h3>
    <p>Текст</p>
    <h3 id="3">Заголовок 3</h3>
    <p>Текст</p>
</div>

После чего сформировать маркированный список с якорями, отправляющими к этим заголовкам по id. По итогу создать список после заголовка h2, привязываясь только к заголовкам h3, чтоб вышло вот так:

<div class="cont">
    <h2>Заголовок</h2>
    <ul class="anchor">
        <li><a href="#1" title="Заголовок 1" rel="nofollow">Заголовок 1</a></li>
        <li><a href="#2" title="Заголовок 2" rel="nofollow">Заголовок 2</a></li>
        <li><a href="#3" title="Заголовок 3" rel="nofollow">Заголовок 3</a></li>
    </ul>
    <p>Текст</p>
    <h3 id="1">Заголовок 1</h3>
    <p>Текст</p>
    <p>Текст</p>
    <h3 id="2">Заголовок 2</h3>
    <p>Текст</p>
    <h3 id="3">Заголовок 3</h3>
    <p>Текст</p>
</div>

Так же, интересует мнение о сложности решения, скорости загрузки и т.д.. Стоит ли так заморачиваться при большом количестве материала или все же руками формировать быстрый переход?

Заранее спасибо за любую помощь.

2
  • getElementsByTagName('h3') вернет массив заголовков. Дальше его можно пробежаться и сформировать ссылки по желаемому принципу
    – DNS
    19 мар 2017 в 13:45
  • @DNS насколько я понимаю, то массив будет без id заголовков. Как потом их раскидать по созданному списку? Можно ли создать массив такого вида {"1": "Заголовок 1", "2": "Заголовок 2", ... } собрав id и сам заголовок из тегов h3? 19 мар 2017 в 16:03

1 ответ 1

2
<div class="cont">
    <h2>Заголовок</h2>
    <p>Текст</p>
    <h3 id="1">Заголовок 1</h3>
    <p>Текст</p>
    <p>Текст</p>
    <h3 id="2">Заголовок 2</h3>
    <p>Текст</p>
    <h3 id="3">Заголовок 3</h3>
    <p>Текст</p>
</div>

<p id='out'></p>

<script>
var a=document.getElementsByTagName('h3');
for(i=0;i<a.length;i++)
    window.out.innerHTML+=a[i].id+', '+a[i].innerHTML+'<br>';
</script>

Пример как можно добраться до ид и текста. Обвязку, надеюсь, сделаете без проблем

--Добавил---

Чтобы получить как в вопросе

<div class="cont">
    <h2>Заголовок</h2>
    <ul class="anchor" id='anc'>

    </ul>
    <p>Текст</p>
    <h3 id="1">Заголовок 1</h3>
    <p>Текст</p>
    <p>Текст</p>
    <h3 id="2">Заголовок 2</h3>
    <p>Текст</p>
    <h3 id="3">Заголовок 3</h3>
    <p>Текст</p>
</div>

<script>
var a=document.getElementsByTagName('h3'),b='';
for(i=0;i<a.length;i++)
    b+='<li><a href="#'+a[i].id+'" title="'+a[i].innerHTML+'" rel="nofollow">'+a[i].innerHTML+'</a></li>';
window.anc.innerHTML = b;
</script>
5
  • О, а я как раз хотел поблагодарить за первую часть. Сделал немного иначе, но, все же, воспользуюсь вашим вариантом, так как он вышел куда короче. Спасибо большое! 19 мар 2017 в 16:58
  • А можно ли в вашем примере добавить именно создание списка, а не вписывание в существующий тег? И проверку тегов. Например, если нет тегов h3 с id, то создание списка не происходит. Вот вариант который я сделал, но, он весьма громоздкий вышел. 19 мар 2017 в 17:35
  • можно, конечно. С одной стороны список без элементов не отображается, но если очень нужно именно создавать - пишите или в innerHTML родителя, или создавайте "ребенка". Проверку можно делать используя hasAttribute(). В довесок я недолюбливаю jQuery. Если нужна помощь именно в этой области - я не эксперт
    – DNS
    19 мар 2017 в 18:31
  • Спасибо за hasAttribute, в общем-то все уже сделал. Только почему-то не выходит проверку заголовков именно по элементу делать, а не по всему документу. Впрочем, это не очень важно. Еще раз спасибо за помощь. 19 мар 2017 в 18:40
  • Сейчас быстро не приходит в голову, как красиво сделать проверку внутри отдельных эл-тов. Лучше всего, дать заголовкам одинаковые имена name= внутри одного блока и искать по именам getElementsByName(). Тогда конфликтов с другими блоками быть не должно
    – DNS
    19 мар 2017 в 18:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.