Проверка пустоты 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')) {
  // Элемент визуально пуст
}

Таким образом, вы проверяете визуальную пустоту элемента, используя специально созданную для этого функцию.

Полезные материалы

1. Селектор :empty | Документация jQuery API — здесь представлена официальная информация о проверке пустоты элемента в jQuery.
2. javascript – Удалить элемент по id – Stack Overflow — дискуссия методов проверки и удаления пустых элементов с помощью jQuery.
3. .html() | Документация jQuery API — подробно описываются способы получения и установки HTML-содержимого элемента.
4. .length | Документация jQuery API — свойство, указывающее на количество элементов или содержимого.
5. Узел: свойство textContent – Web APIs | MDN — полезные сведения о textContent, которые пригодятся при работе с jQuery.
6. Метод jQuery children() — как найти дочерние элементы с помощью .children().
7. .contents() | Документация jQuery API — метод .contents() поможет проверить дочерние узлы, включая текстовые.