Генератор favicon   •   Online-инструменты
12 609 просм
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>
	
	window.onload = function() {
	
		if(document.getElementsByClassName("list_comm")[0].textContent == "") {
  
			document.getElementsByClassName("main_block")[0].style.display = "none";
  
		}
	
	};
	
</script>

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

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

Здесь есть два похожих варианта кода. Это

<script>

	$(document).ready(function() {
	
		if($(".list_comm").text() == "") {

			$(".main_block").hide();

		}
		
	});
	
</script>

и

<script>
	
	$(document).ready(function() {
	
		if($(".list_comm").is(":empty")) {
	
			$(".main_block").hide();
		
		}
		
	});
	
</script>

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

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

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

.list_comm:empty {
	display: none;
}

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

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
Гостям запрещено учавствовать в обсуждениях сайта. Авторизуйтесь, чтобы иметь возможность оставить свое мнение о материале или задать вопрос.