我希望代码遍历每个 div，如果它具有 \'type2\' 或 \'type3\' 类，则显示其上方具有 \'itemheader\' 类的 div。它不是嵌套的...

我希望代码遍历每个 div，如果它的类为 \'type2\' 或 \'type3\'，则显示其上方的类为 \'itemheader\' 的 div。它不是嵌套的，因此不是父/子情况。但是，如果第一个项目是 \'type1\' 或 \'type2\'，则此代码仅显示 \'itemheader\' div。有时会有多个 \'type1\' 实例直接位于其上方或下方，或者可能根本不存在。

带有 \'type1\' 的 div 已经使用 CSS 隐藏。

更改 HTML 代码不是一个选项，它是由另一个程序自动生成的并且无法更改，我试图操纵它以仅显示某些文本。

现有的 HTML 代码：

<div class="itemheader">content</div>
    <div class="itemcontent type1">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type1">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type1">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type1">content</div>
    <div class="itemcontent type1">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>
    <div class="itemcontent type1">content</div>

期望显示的结果：

<div class="itemheader">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>
<div class="itemheader">content</div>
    <div class="itemcontent type2">content</div>
    <div class="itemcontent type3">content</div>

现有的 jQuery

$(".itemheader").hide();

$(".itemheader").each(function() {
  if ($(this).next().hasClass("type2")) {
    $(this).show();
  }
  if ($(this).next().hasClass("type3")) {
    $(this).show();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type1">content type 1</div>
<div class="itemcontent type2">content type 2</div>
<div class="itemcontent type3">content type 3</div>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type3">content type 3</div>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type2">content type 1</div>
<div class="itemcontent type2">content type 2</div>
<div class="itemcontent type3">content type 3</div>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type1">content type 1</div>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type1">content type 1</div>
<div class="itemheader">itemHeader</div>
<div class="itemcontent type1">content type 1</div>
<div class="itemcontent type1">content type 1</div>
<div class="itemcontent type2">content type 2</div>
<div class="itemcontent type3">content type 3</div>
<div class="itemcontent type1">content type 1</div>

我曾尝试使用 nextUntil() 和 filter()，但这只会设置 \'itemcontent\' div 的样式，而不是 \'itemheader\' div。

测试功能的示例：

$('.itemheader').nextUntil('.itemheader').filter('.type2').css('backgroundColor', 'yellow');

• nextuntil