jQuery ile h2 etiketlerini ve h2 etiketleri arasında kalan h3 etiketlerini elde etme

Genelde dökümantasyon sayfalarında karşımıza çıkan sayfanın sağında veya solunda konumlanarak yazı içindeki başlıklar arasında gezinmemizi sağlayan navigasyon bar dır. Basitçe yazı içinde ki h2 etiketlerini ve h2 etiketleri arasında kalan h3 etiketlerini bulan bir kod ile navbar tasarlayabiliriz.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="headings">
  <h2>1. ANA BAŞLIK 1</h2>
  <h3>1.1. Alt başlık 1</h3>
  <h3>1.2. Alt başlık 2</h3>
  <h2>2. ANA BAŞLIK 2</h2>
  <h3>2.1. Alt başlık 1</h3>
  <h3>2.2. Alt başlık 2</h3>
  <h3>2.3. Alt başlık 3</h3>
</div>

<div id="contents"></div>

a {
  display: block;
}

$('h2').each(function(i) {
  $('#contents').append('<a href="#title-' + (i + 1) + '" class="summary-link">' + $(this).text() + '</a>');

  $(this).nextUntil('h2').filter('h3').each(function(j) {
    $('#contents').append('<a href="#subtitle-' + (j + 1) + '" class="summary-link">' + $(this).text() + '</a>');
  });
});

See the Pen Get all H3 between two H2 with jQuery by Ahmet (@ahmetardahanli) on CodePen.