Проверка пустоты HTML элемента с помощью jQuery
Быстрый ответ
Для того чтобы быстро определить, является ли элемент на веб-странице пустым, вы можете использовать следующий код:
$('#elementId').is(':empty') // возвращает true для пустого элемента и false в противном случае
Селектор :empty
выберет те элементы, которые не содержат ни дочерних элементов, ни текста. Однако существуют и другие методы, которые позволяют достигнуть такой же цели.
Борьба с пробелами
Пробелы могут ввести вас в заблуждение: они невидимы, но с точки зрения селектора :empty
считаются содержимым. Поэтому пробелы следует удалить перед проверкой:
$.trim($('#elementId').html()) === '' // возвращает true, если элемент выглядит пустым
Проверка дочерних узлов
Если у элемента сложная структура с множеством дочерних узлов и текста, можно применить метод hasChildNodes
:
!$('#elementId')[0].hasChildNodes() // вернет true, если дочерних элементов и текстовых узлов нет
А что, если интересуют только дочерние элементы?
Если вас интересует наличие только дочерних элементов, не учитывая текст, можно использовать следующую проверку:
$('#elementId').children().length === 0 // вернет true, если дочерних элементов нет
Этот способ сконцентрирован на поиске исключительно элементов, не учитывая текстовые узлы.
Применение повторяемости с помощью jQuery.fn
Для расширения функциональности jQuery и уменьшения кода можно использовать jQuery.fn
:
jQuery.fn.isEmpty = function() {
return !$.trim(this.html());
};
// Использование функции:
if ($('#elementId').isEmpty()) {
// Условие, выполняющееся, если элемент пуст
}
Этот подход упрощает код и позволяет легко внедрять новую функцию в цепочку вызовов jQuery.
Условное выполнение
Применяйте функции только в том случае, когда элемент полностью пуст — это добавит элегантности вашему коду:
$('#elementId').is(':empty') && someFunction(); // Функция someFunction выполнится, если элемент пуст
С применением такого подхода код остаётся чистым, и он демонстрирует прямую зависимость от состояния элемента.
Избегаем ошибок исходя из :empty
Селектор :empty
учитывает все пробелы и переводы строк:
$('div:empty').length; // Может показать 0 для div с пробелами или переводами строк
Поэтому перед использованием :empty
рекомендуется применять trim.
Визуализация
Представим HTML-элемент в виде коробки:
📦 <div></div> // Коробка без содержимого?
С помощью jQuery вы можете проверить, пуста ли эта коробка:
$('div').is(':empty'); // Это просто пустая коробка?
В результате проверки вы увидите, – либо пустоту,
📦:empty: // Да, пусто! Содержимое отсутствует (😮)!
либо наличие чего-то внутри:
📦:not_empty: // Внутри найдено что-то интересное (🎉)!
Работа с динамически загружаемым содержимым
В современных веб-страницах контент может динамически обновляться. В таком случае следует использовать следующий подход:
loadContent().then(() => {
if ($('#elementId').is(':empty')) {
// Производим действия при отсутствии содержимого
}
});
Не менее актуален и событийный подход:
$('input').on('change', function() {
if (!$(this).val()) {
// Поле осталось пустым
}
});
Выделение визуально пустых элементов
Визуально пустые элементы не содержат видимых данных, но могут включать в себя скрытые поля или скрипты. Для обнаружения таких элементов можно воспользоваться следующим методом:
function isVisuallyEmpty(element) {
return !$(element).children().not(':hidden').length && !$.trim($(element).text());
}
if (isVisuallyEmpty('#elementId')) {
// Элемент визуально пуст
}
Таким образом, вы проверяете визуальную пустоту элемента, используя специально созданную для этого функцию.
Полезные материалы
- Селектор :empty | Документация jQuery API — здесь представлена официальная информация о проверке пустоты элемента в jQuery.
- javascript – Удалить элемент по id – Stack Overflow — дискуссия методов проверки и удаления пустых элементов с помощью jQuery.
- .html() | Документация jQuery API — подробно описываются способы получения и установки HTML-содержимого элемента.
- .length | Документация jQuery API — свойство, указывающее на количество элементов или содержимого.
- Узел: свойство textContent – Web APIs | MDN — полезные сведения о
textContent
, которые пригодятся при работе с jQuery. - Метод jQuery children() — как найти дочерние элементы с помощью
.children()
. - .contents() | Документация jQuery API — метод
.contents()
поможет проверить дочерние узлы, включая текстовые.