Генератор favicon
Артем Мáлков
584 просм
2 комм
Поделиться

Скрываем div в случае, если он пустой на JavaScript/jQuery/CSS

Задача стоит, как вы поняли, следующая – скрыть div, если его содержимое пусто, и показывать, если в нем есть текст. Очень нужная вещь, тем более когда нет полного доступа к коду вашего ресурса.

Итак, мы полагаем, что у нас есть такая конструкция:

<div class="main_block">
К данному материалу есть комментарии:
<div class="list_comm"></div>
</div>

Нам нужно скрыть весь блок, в зависимости от того, есть ли у нас текст в <div class="list_comm"></div> или нет.

Скрываем div в случае, если он пустой на JavaScript

Для решения этой задачи на JavaScript нам потребуется следующий код:

<script>
if($('.list_comm').text() == ''){
$('.main_block').css({'display':'none'});
}
</script>

Скрипт рекомендую вставлять перед закрывающим тегом </body>.

Скрываем div в случае, если он пустой на jQuery

Здесь конструкция кода схожа с кодом выше:

<script>
if ($('.list_comm').is(':empty')){
$('.main_block').css({'display':'none'});
}
</script>

Этот вариант я рекомендую также вставлять перед закрывающим тегом </body>.

Скрываем div в случае, если он пустой на CSS

Здесь тоже, как всегда, все просто. В конце ваших стилей CSS вставьте:

.list_comm:empty {display: none}

Если в первых двух вариантах вы не хотите скрывать весь блок, а только определенный div – в коде

$('.main_block').css

замените на

$(this).css

Вот вроде и все, до новых и интересных статей!

2
комментария
Kelin
10.02 в 21:15
Обратный вариант - скрываем, если есть содержимое
.list_comm:not(:empty) {display:none;}
.list_comm:empty {display:block;}
  • 1
Алексей
3.04 в 17:43
А если вот такая задачка:
div1 меняет размер по горизонтали,
div2 50% от div1 по умолчанию.
если div2 50% от div1 то он зелёный
если div2 меньше чем на 50% меньше от div1, то он начинает краснеть и при приближении к нулю совсем красный становится.
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария