收集所有 sub-title 做一个总结

Question

我想做一个总结，让您可以检索页面上的所有 h2，然后通过制作锚点使它们可点击。

我已经编写了检索它们并将它们显示在 div 中的代码。

$(document).ready(function() {
    var x = document.querySelectorAll("#content-article h2");
    for (var i = 0; i < x.length; i++) {
        var content = x[i].innerHTML;
        document.getElementById('result').innerHTML += '<a href="#">'+content+'</a>';
    }
});

谢谢

Answer 1

您的 h2 标题需要 id 像这样：

$(document).ready(function() {
    $("#content-article").find('h2').each(function(index, h2) {
      var id = $(h2).attr('id');
      var title = $(h2).text();
      $("#result").append('<a href="#'+id+'">'+title+'</a>');
    });
});

a {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"></div>
<div id="content-article">
    <h2 id="first-section">My first section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dictum nisi, a fringilla purus. Curabitur mi odio, pellentesque a cursus a, fermentum vitae velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porta varius magna et sodales. In porttitor massa a sapien imperdiet, sed dapibus leo aliquet. Etiam vitae ligula aliquam sem maximus laoreet eu a felis. In scelerisque metus molestie dignissim maximus. Morbi aliquet, justo nec vestibulum scelerisque, tortor eros porta nisl, id dapibus massa leo vel ex.</p>
    <h2 id="second-section">My second section</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at dictum nisi, a fringilla purus. Curabitur mi odio, pellentesque a cursus a, fermentum vitae velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed porta varius magna et sodales. In porttitor massa a sapien imperdiet, sed dapibus leo aliquet. Etiam vitae ligula aliquam sem maximus laoreet eu a felis. In scelerisque metus molestie dignissim maximus. Morbi aliquet, justo nec vestibulum scelerisque, tortor eros porta nisl, id dapibus massa leo vel ex.</p>
</div>

需要更多背景信息！你想要 summary 标签吗？

收集所有 sub-title 做一个总结

Make a summary by collecting all sub-title

html

javascript

jquery

summary