如果缺少子div，则隐藏父div

Question

如果缺少子div，是否可以完全隐藏父div？

在下面的示例中，如果缺少某些div，例如.views-content和.views-row，我想隐藏“＃live-sessions”的父div。

这是当div出现时的样子：

<div id="live-sessions">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <h3 class="session-title">Sessions Live Now</h3>

                    <div class="col-sm-9">

                       <div class-"view-display-id-live_sessions">

                            <div class="views-content">

                               <div class="views-row">
                               </div>

                               <div class="views-row">
                               </div>

                           </div>

                       </div>


                    </div>
                </div>
            </div>
 </div>

这是缺少div时的样子：

<div id="live-sessions">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-3">
                            <h3 class="session-title">Sessions Live Now</h3>

                        <div class="col-sm-9">

                           <div class-"view-display-id-live_sessions">


                           </div>


                        </div>
                    </div>
                </div>
</div>

我尝试将：empty选择器与父方法一起使用，但我的子div包含一些空行，因此认为它不是空的。 我也想隐藏空div的父级的父级。

$(".view-display-id-live_sessions:empty").parent().hide(); 

Answer 1

如果测试不合格，请使用jQuery has() -http://api.jquery.com/has/

if(!$('#parent').has('.child')){
  $('#parent').hide();
}

Answer 2

没有针对此的单行查询。 以下代码可以解决问题：

$('#live-sessions .row').each(function(idx, row) {
    if ($(row).find('.views-content').length == 0) {
        $(row).hide();
    }
});

Answer 3

您的html中有错字：

class-"view-display-id-live_sessions"

应该

class="view-display-id-live_sessions"

您可以尝试以下jQuery代码：

if ($(".view-display-id-live_sessions").html().trim() == '') {
    $(".view-display-id-live_sessions").parent().parent().hide();
}

jqVersion演示

Answer 4

如果您想继续使用jQuery，可以改为：

if ( ! $(".view-display-id-live_sessions").children().length ) { /* your logic */ }

请注意，您的代码中存在语法错误：

 <div class-"view-display-id-live_sessions">

应该

 <div class="view-display-id-live_sessions">

Answer 5

您需要剪裁空格，更正输入错误并测试div中的文本-

class="view-display-id-live_sessions" // note the equals sign after class

进行隐藏的代码（再次重新编辑问题）：

var liveSessionsText = $.trim( $('.view-display-id-live_sessions').text() );
if(0 == liveSessionsText.length) {
    $('.view-display-id-live_sessions').closest('.row').hide();
}

带有class =“ row”的div是view-display-id-live_sessions的父级的父级。

Answer 6

如果您了解自己的问题：

首先，您需要检查.views-row div的数量。 如果长度为零，则隐藏父div。

例如：

if ($('.views-row').length < 1)
   $('#live-sessions').hide();

祝好运。