Получить все H3 между двумя H2 с помощью jQuery

Question

Я создаю динамический генератор сводок с помощью jQuery. Я хочу перечислить все H2 и H3 на странице.

Я сделал это для H2, это мой код:

EDIT: я просто обновляю свой код, включая H2 и H3но есть несколько ошибок.

<div id="summary"></div>
<script>
var counter = 0;
$('h2').each(function() {
   counter++;
   $(this).attr("id", "title-" + counter);
   $('#summary').append('<a href="#title-' + counter + '" class="summary-link">' + $(this).text() + '</a>');
   //
   var counter_2 = 0;
   $('h2 ~ h3').each(function() {
     counter_2++;
     $(this).filter(function() {
        return $(this).nextAll('h2').length
     }).attr("id", "subtitle-" + counter_2);
     $('#summary').append('<a href="#subtitle-' + counter_2 + '" class="summary-link">' + $(this).text() + '</a>');
   });
});  
</script>

Пример сообщения блога:

<h2>Post title 1</h2>
<h3>Post subtitle 1</h3>
<h3>Post subtitle 2</h3>
<h2>Post title 2</h2>
<h3>Post subtitle 3</h3>
<h3>Post subtitle 4</h3>

Результаты моего кода:

<h2 id="title-1">Post title 1</h2>
<h3 id="subtitle-1">Post subtitle 1</h3>
<h3 id="subtitle-2">Post subtitle 2</h3>
<h2 id="title-2">Post title 2</h2>
<h3 id="subtitle-3">Post subtitle 3</h3>
<h3 id="subtitle-4">Post subtitle 4</h3>

<a href="#title-1">Post title 1</a>
<a href="#subtitle-1">Post subtitle 1</a>
<a href="#subtitle-2">Post subtitle 2</a>
<a href="#subtitle-3">Post subtitle 3</a>
<a href="#subtitle-4">Post subtitle 4</a>
<a href="#title-2">Post title 2</a>
<a href="#subtitle-1">Post subtitle 1</a>
<a href="#subtitle-2">Post subtitle 2</a>
<a href="#subtitle-3">Post subtitle 3</a>
<a href="#subtitle-4">Post subtitle 4</a>

Ожидаемые результаты:

<h2 id="title-1">Post title 1</h2>
<h3 id="subtitle-1">Post subtitle 1</h3>
<h3 id="subtitle-2">Post subtitle 2</h3>
<h2 id="title-2">Post title 2</h2>
<h3 id="subtitle-3">Post subtitle 3</h3>
<h3 id="subtitle-4">Post subtitle 4</h3>

<a href="#title-1">Post title 1</a>
<a href="#subtitle-1">Post subtitle 1</a>
<a href="#subtitle-2">Post subtitle 2</a>
<a href="#title-2">Post title 2</a>
<a href="#subtitle-3">Post subtitle 3</a>
<a href="#subtitle-4">Post subtitle 4</a>

Я не знаю, как я могу получить все H3 между двумя H2, поэтому любая помощь может быть полезна.

Answer 1

Использование nextUntil() и filter()

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

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

a {
  display: block;
}

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

<div id="summary">
  <h2>Post title 1</h2>
  <h3>Post subtitle 1</h3>
  <h3>Post subtitle 2</h3>
  <h2>Post title 2</h2>
  <h3>Post subtitle 3</h3>
  <h3>Post subtitle 4</h3>
</div>