javascript - 在子标题之间选择相邻的 sibling 作为单独的组？

Question

我需要一种方法来识别所有 <p>副标题标签之间的标签 <h2>作为分离的组。
我无法使用 h2 ~ p因为这会选择所有 <p>标记到单个选择中。
当另一个标题标 checkout 现时，我需要能够停止选择。
和<p>的数量标签会改变所以我怀疑::nth-child(x)会有所帮助，虽然我可能是错的。

<section>
  <h2>Heading I want</h2>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <h2>Heading I don't want</h2>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
</section>

这可能吗？
更新 - 限制:
原来的结构不能改变。我用来将文本导出到数据表中的工具只有有限的类似 JS 的命令，如下所示:
$e.text - 获取内部文本或值
$e.outerHTML - 获取元素的外部 html
$e.prop - 一个行为类似于 jQuery prop 函数的函数。
$e.css - 行为类似于 jQuery css 函数的函数
$e.parentProp - 一个行为类似于 jQuery prop 函数的函数。
$e.parent - 获取与 $e/具有所有相同属性的父元素

Answer 1

如果您只是想添加样式，您可以将样式应用于所有 <p>元素，然后从第二组中删除该样式。

h2:first-child ~ p {
  background: green;
}
h2:not(:first-child) ~ p {
  background: none;
}

<section>
  <h2>Heading I want</h2>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <p>Some text I want</p>
  <h2>Heading I don't want</h2>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
  <p>Text I don't want</p>
</section>

如果您需要在 JavaScript 中为样式以外的其他内容选择它们，则可以使用类似的选择器来获取所有它们，然后在第二个选择中删除它们。