在两个带有H3的H2之间获取所有jQuery

Question

我正在用jQuery构建一个动态摘要生成器。我想在页面上列出所有的H2和H3。

我是为H2做的，这是我的代码：

编辑:我只是更新我的代码，包括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>

​