如果 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东西连续运行它。