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

Question

我正在处理vertical timeline，我有三类事件：国家、国际和讣告，每一个都由同名的类指定。一个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

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

Answer 2

使用.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 子元素有任何可用内容，就会出现父块。