Question

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

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

这就是当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

在否定if测试中使用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 demo

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();
}

div =＆＃34; row＆＃34;是view-display-id-live_sessions的父级的父级。

Answer 6

如果您理解了您的问题：

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

例如：

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

祝你好运。

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

6 个答案: