我希望代码遍历每个 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');
这是一个解决方案:首先隐藏全部 $(".itemcontent.type1")
,然后 $(".itemheader")
仅当下一个可见元素不是 .itemheader
(选择使用 nextAll(':visible').first()
)
$(".itemcontent.type1").hide();
$(".itemheader").each(function() {
if (!$(this).nextAll(':visible').first().hasClass("itemheader")) {
$(this).show();
} else {
$(this).hide();
}
});
.itemheader {
font-weight: bold;
}
<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 2</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>