Проверяем элемент на наличие содержимого и выводим нужный нам текст. JavaScript

В этой статье мы рассмотрим пару строк, скрипт который очень полезен для DLE шаблонов.
Всего пару строк, суть этих строк в следующем:
Скрипт проверяет определенный html элемент с css классом в качестве идентификатора и если блок пуст, то выводит сообщение типа "Комментариев нет / Облако тегов пусто" и так далее.

Идея пришла в голову при создании шаблона каталога. Блок с комментариями выглядел пустым и это портило весь вид шаблона(панели)
Я решил вывести соответствующий текст с ошибкой в случае отсутствия информации в блоке div

Допустим мы выводим последние комментарии таким образом

<div class="lastcomments">
{customcomments template="lastcomments" available="global" from="0" limit="5" order="date" sort="desc" cache="no"}
</div>

Div с классом "lastcomments" имеет своё оформление, стили, отступы и так далее. И отображается даже если комментариев нет. Это выглядит не очень красиво. Так вот эти строки на JS выводят текст "Комментариев пока нет..." именно в блоке с классом "lastcomments" И выглядит это так:

<div class="lastcomments">
{customcomments template="lastcomments" available="global" from="0" limit="5" order="date" sort="desc" cache="no"}
<div id="info-div"></div>
</div>
<script>
$('#info-div').html('');
!$('#lastcomments').find('a').length && ($('#info-div').html('<div class="infoerror">Нет комментариев</div>'));
</script>

Давайте разберемся как работает скрипт.

<div id="info-div">	Выводит нашу ошибку
#lastcomments	Тот самый идентификатор, который показывает скрипту где нужно  проверять блок на наличие того или иного html тега
.find('a')	Указываем какой тег нам нужно искать. К примеру можно указать li тогда  скрипт будет проверять блок на наличие тегов <li></li>
<div class="infoerror">Нет комментариев</div>	Сам текст который выводится блоком info-div

Скрипт можно использовать во многих местах шаблона. К пример для вывода ошибки об отсутствии личных сообщений, для вывода ошибки на странице статистики. и так далее... Применений очень много. Надеюсь пригодится  скачать dle 11.1смотреть фильмы бесплатно

---

js javascript блок html div

Вернуться назад

1. 

   1

   Shakenoff 2018-10-05

   полезный совет спасибо