我正在研究vertical timeline,并且我将事件分为三类:国家事件,国际事件和ob告事件,每一个事件均由同名类别指定。 div块的结构如下:
<div class="cd-timeline__block js-cd-block">
<div class="cd-timeline__img cd-timeline__img--location js-cd-img">
<img src="img/cd-icon-location.svg" alt="Location">
</div>
<div class="cd-timeline__content js-cd-content">
<p class="National List">The Election Commission recommends to the President the disqualification of 20 AAP MLAs in Delhi</p>
<span class="cd-timeline__date">Jan. 19</span></div>
如果用户在下拉菜单(属于UI的一部分)中选择了“国家”事件,则Javascript函数会自动隐藏其他两个类别事件,如下所示:
$('#newscategory').on('change', function(){
if(this.value=="Nat"){
$('.National').show();
$('.International').hide();
$('.Obituaries').hide();
}
});
但是,如果在特定日期不存在“国家”事件,则p标签周围的容器不会被隐藏。我希望时间轴完全跳过该日期,这意味着如果p标签被隐藏,我想使用class =“ cd-timeline__block js-cd-block”隐藏父div。我该如何实现? 另一个问题是页面上有数百个事件。
代码示例可以为found here
答案 0 :(得分:1)
使用.each
遍历父块,并检查其子段落元素是否包含任何内容,如果保留,则保留它,如果子段落元素中没有任何内容,则将其隐藏。
$('.cd-timeline__block.js-cd-block').each(function () {
var showElement = false;
$(this).find('p').each(function () {
var len = $.trim($(this).html()).length;
if (len > 0) {
showElement = true;
}
});
if (showElement === false) {
$(this).hide();
} else {
$(this).show();
}
});
这样,如果至少一个p
子元素具有任何可用内容,则将显示父块。
答案 1 :(得分:1)
可以使用.toggle
,Array.some
和:empty
:
$(function() {
// For each div element
$('div').each(function () {
// Show it only if one of its children paragraphs is non-empty
$(this).toggle($(this).find('p').toArray().some(function (p) {
return !$(p).is(':empty');
}));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
div with some non empty paragraphs
<p>non empty</p>
<p></p>
<p>non empty</p>
</div>
<div>
div with only empty paragraphs
<p></p>
<p></p>
<p></p>
</div>
根据您的情况,用适当的(更具体的)选择器替换$('div')
。