javascript - 如果子 p 标签为空，则隐藏 div block

Question

我正在研究 vertical timeline我有三类事件:国内事件、国际事件和讣告事件，每一种事件都由同名的类指定。 div block 的结构如下:

<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

Answer 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') 替换为适当的(更具体的)选择器。