使用jQuery获取两个H2之间的所有H3

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>

我不知道如何在两个H2之间得到所有的H3，所以任何帮助都会有帮助。

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>