скрыть div, если другой div пуст в jquery

ProgramBox

скрыть div, если другой div пуст в jquery

Post author:admin
Запись опубликована:31 августа, 2022
Post category:Вопросы по программированию

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

Я «просто» хочу скрыть заголовок этого div (#event-cdc), если div пуст, у меня есть этот 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="{amp;quot;_animationamp;quot;:amp;quot;fadeInUpamp;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="{amp;quot;_animationamp;quot;:amp;quot;fadeInRightamp;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>

И я могу просто вызвать этот div #event1 с помощью этого кода jquery :

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

Я также пытаюсь выполнить это условие :

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

Безуспешно…

У вас есть идея помочь мне?

С уважением

1. В предоставленном вами html-файле нет элемента с таким идентификатором.

2. Содержит ли ваша страница больше html-элементов с идентификатором #event-cdc ? Если это так, то используйте разные идентификаторы. Если это не так, предоставьте больше кода.

3. Я отредактировал свой код

Ответ №1:

Приведенный пример кода на самом деле не отображается div#event-cdc в разметке, поэтому мы не можем быть уверены, что скрытая часть будет работать, но критически важно, что ни одно из ваших условий не оценивается как true . Вот пример children #event1 :

 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="{amp;quot;_animationamp;quot;:amp;quot;fadeInRightamp;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="{amp;quot;_animationamp;quot;:amp;quot;fadeInRightamp;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="{amp;quot;_animationamp;quot;:amp;quot;fadeInRightamp;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="{amp;quot;_animationamp;quot;:amp;quot;fadeInUpamp;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="{amp;quot;_animationamp;quot;:amp;quot;fadeInRightamp;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>

Ответ №2:

Вы можете использовать обычный JavaScript.

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

Затем используйте что-то вроде setInterval , чтобы запускать его непрерывно, если хотите.

1. Но innerHTML of #event1 не пуст — он содержит много дополнительной разметки, просто текстовое содержимое не отображается на экране.

2. Если это так, то вы могли бы использовать textContent , но опять же, он может неточно определять изображения или нетекстовые элементы. Хорошая мысль @AlexanderNied.

Ответ №3:

попробуйте что-то вроде этого:

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

1. Тоже не работает, .. 🙁 Я думаю, это потому, что у меня есть какой-то класс под моим div.

2. попробуйте .text() вместо .html()

3. Это не работает, потому что вывод .text() в их случае представляет собой не пустую строку, а строку, содержащую много пробелов.

Метки: скрыть div если другой div пуст в jquery