如果 jquery 中的其他 div 為空，則隱藏 div

Question

如果 div 為空，我“只是”想隱藏這個 div 的標題（#event-cdc）我有這個 html 元素要測試

<div class="elementor-element elementor-element-fce254c elementor-invisible elementor-widget elementor-widget-jet-headline" data-id="fce254c" data-element_type="widget" id="event-cdc" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="jet-headline.default">
                <div class="elementor-widget-container">
            <h2 class="jet-headline jet-headline--direction-vertical"><span class="jet-headline__part jet-headline__first"><span class="jet-headline__label">Les évènements</span></span><span class="jet-headline__part jet-headline__second"><span class="jet-headline__label">où nous serons présent</span></span></h2>      </div>
                </div>
                <div class="elementor-element elementor-element-8ae0c27 elementor-invisible elementor-widget elementor-widget-bdt-event-list" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default">
                <div class="elementor-widget-container">
                    <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar">
            <div class="bdt-list bdt-list-large">

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

我可以用這個 jquery 代碼調用這個 div #event1 ：

jQuery(document).ready(function(){
    if ( $("#event1").children().length === 0 ) {
        $("#event-cdc").hide();
    }
});

我也嘗試過這種情況：

if ( $.trim( $('#event1').text() ).length === 0 ) {

沒有成功...

你有什么想法可以幫我嗎？

問候

Answer 1

提供的示例代碼實際上並未在標記中顯示div#event-cdc ，因此我們無法確定隱藏部分是否會起作用，但關鍵的是，您的條件都沒有評估為true 。 下面是#event1的children的一個例子：

 jQuery(document).ready(function(){ console.log($("#event1").children().length); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default"> <div class="elementor-widget-container"> <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar"> <div class="bdt-list bdt-list-large"> </div> </div> </div> </div>

這是text()的示例：

 jQuery(document).ready(function(){ console.log($.trim( $('#event1').text() )); console.log($.trim( $('#event1').text().length )); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default"> <div class="elementor-widget-container"> <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar"> <div class="bdt-list bdt-list-large"> </div> </div> </div> </div>

您在使用$.trim是它在中間保留了空白，因此它保留了您巨大的空白輸出。

無論如何， $.trim已被棄用——如果你使用原生 JavaScript .trim它工作得很好：

 jQuery(document).ready(function(){ console.log($('#event1').text().trim().length); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elementor-element elementor-element-8ae0c27 elementor-widget elementor-widget-bdt-event-list animated fadeInRight" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default"> <div class="elementor-widget-container"> <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar"> <div class="bdt-list bdt-list-large"> </div> </div> </div> </div>

這是使用您問題中的更新代碼的工作示例：

 jQuery(document).ready(function(){ if ($('#event1').text().trim().length === 0) { $("#event-cdc").hide(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elementor-element elementor-element-fce254c elementor-invisible elementor-widget elementor-widget-jet-headline" data-id="fce254c" data-element_type="widget" id="event-cdc" data-settings="{&quot;_animation&quot;:&quot;fadeInUp&quot;}" data-widget_type="jet-headline.default"> <div class="elementor-widget-container"> <h2 class="jet-headline jet-headline--direction-vertical"><span class="jet-headline__part jet-headline__first"><span class="jet-headline__label">Les évènements</span></span><span class="jet-headline__part jet-headline__second"><span class="jet-headline__label">où nous serons présent</span></span></h2> </div> </div> <div class="elementor-element elementor-element-8ae0c27 elementor-invisible elementor-widget elementor-widget-bdt-event-list" data-id="8ae0c27" data-element_type="widget" id="event1" data-settings="{&quot;_animation&quot;:&quot;fadeInRight&quot;}" data-widget_type="bdt-event-list.default"> <div class="elementor-widget-container"> <div id="bdt-event-8ae0c27" class="bdt-event-list bdt-event-calendar"> <div class="bdt-list bdt-list-large"> </div> </div> </div> </div>

Answer 2

嘗試這樣的事情：

$(document).ready(function(){
   if($("#div-which-will-check-to-be-empty").text()==""){
        $("#div-to-hide").css("display","none");
   }else{
        $("#div-to-hide").css("display","inline");
   }
})

Answer 3

您可以使用純 JavaScript。

if(document.getElementById("if-no-content-div-id").innerHTML = "") {
  document.getElementById("div-to-hide-id").hidden = "true";
}

然后，如果您願意，可以使用setInterval東西連續運行它。