Генератор случайных чисел   •   Online-инструменты
843 просм
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
Текст комментария