如何用jQuery实现：后续存在type2/type3时显示对应itemheader

核心思路是逐个检查每个.itemheader后续的所有.itemcontent（直到下一个.itemheader为止），只要其中存在.type2或.type3类的元素，就显示当前.itemheader。

最终代码 #

// 先默认隐藏所有itemheader（若初始状态已隐藏可省略）
$('.itemheader').hide();

// 遍历每个itemheader进行判断
$('.itemheader').each(function() {
    // 获取当前header之后、下一个header之前的所有itemcontent，筛选出type2/type3的元素
    const validContents = $(this).nextUntil('.itemheader', '.itemcontent').filter('.type2, .type3');
    
    // 只要存在符合条件的content，就显示当前header
    if (validContents.length > 0) {
        $(this).show();
    }
});

代码解释 #

• nextUntil('.itemheader', '.itemcontent')：精准锁定当前.itemheader的管辖范围——只取它之后到下一个.itemheader之前的.itemcontent，不会跨到其他header的内容区域，完美解决中间夹多个.type1的问题。
• filter('.type2, .type3')：从上述范围内筛选出符合要求的内容元素，避免无效的.type1干扰判断。
• 长度判断：通过length > 0确认是否存在有效内容，直接控制对应.itemheader的显示状态。

示例验证 #

假设你的HTML结构如下：

<div class="itemheader">Header 1</div>
<div class="itemcontent type1">Type 1 Content</div>
<div class="itemcontent type2">Type 2 Content</div>
<div class="itemheader">Header 2</div>
<div class="itemcontent type1">Type 1 Content</div>
<div class="itemcontent type1">Type 1 Content</div>
<div class="itemheader">Header 3</div>
<div class="itemcontent type3">Type 3 Content</div>

运行代码后，Header 1和Header 3会显示，Header 2会隐藏，完全符合你的期望结果。

内容的提问来源于stack exchange，提问作者APA