Супербыстрый хостинг на SSD от 115р в месяц   •   Реклама
15 740 просм
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
комментария
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
3.04 в 17:43

А если вот такая задачка:

div1 меняет размер по горизонтали,

div2 50% от div1 по умолчанию.

если div2 50% от div1 то он зелёный

если div2 меньше чем на 50% меньше от div1, то он начинает краснеть и при приближении к нулю совсем красный становится.

  • 0
10.02 в 21:15

Обратный вариант - скрываем, если есть содержимое

.list_comm:not(:empty) {display:none;}

.list_comm:empty {display:block;}

  • 2
Подняться наверх
«Pandoge» - помощник веб-мастера