如果缺少子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();

祝好運。