如果子p标签为空,则隐藏div块

时间:2019-01-05 10:46:53

标签: javascript jquery css

我正在研究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

2 个答案:

答案 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)

可以使用.toggleArray.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')