Проверка видимости div в jQuery: решение для SPA

Быстрый ответ

Для определения видимости элемента div можно воспользоваться функцией jQuery .is(":visible"):

if ($("#myDiv").is(":visible")) {
  // Всё отлично, div присутствует и виден!
}

Учтите, что данный код проверяется на основе CSS-свойств display и visibility, однако без учёта того, отображается ли div на экране пользователя.

Понятие :visible в jQuery

Видимостью элемента на веб-странице управляют такие CSS-свойства, как display, visibility, opacity, а также его расположение внутри области просмотра. Функция jQuery .is(':visible') проверяет, соответствует ли элемент критериям видимости в соответствии с CSS, не учитывая его позицию внутри окна просмотра.

Условные проверки и операции

Ваши действия могут зависеть от видимости div:

// Если div виден на экране, инициируем интересную операцию
if ($('#selectDiv').is(':visible')) {
  performCoolAction(); // Реализация этой операции зависит от вас
}

// Если div невидим, выберем альтернативную стратегию поведения
if (!$('#invisibleDiv').is(':visible')) {
  performExcitingAction(); // Например, совершить что-то захватывающее
}

Подробнее об этом расскажет наш спикер на видео

Особенности SPA: изменение видимости без перезагрузки страницы

В одностраничных приложениях (SPA) элементы могут становиться видимыми или невидимыми динамически, особенно важно это учитывать после асинхронных операций:

function checkVisibility() {
  if ($('#selectDiv').is(':visible')) {
    // Здесь выполняется уникальный код, когда div становится видимым
  }
}

// вызывайте эту функцию при каждом потенциально меняющем видимости событии.

Визуализация

Можно себе представить проверку видимости как проверку через окна дома:

Окно (🏠🪟): [Шторы закрыты 🚫, Шторы открыты ✅]

Применим эту идею в контексте jQuery:

if ($('#divId').is(':visible')) {
  console.log('В доме кто-то есть! Иначе говоря, div виден.');
}

Аналогия вида:

Шторы закрыты 🚫: $('#divId').is(':visible') // false: мы ничего не видим!
Шторы открыты ✅: $('#divId').is(':visible') // true: мы вас видим, `divId`!

Нюансы использования :visible

Селектор :visible относится к элементам, у которых свойство CSS display не равно none, а visibility не равно hidden. Несмотря на то что элементы нулевого размера технически видны, jQuery считает их невидимыми:

// Элемент нулевого размера "невидим" с точки зрения jQuery
$('#zeroSizeDiv').is(':visible') // false

Игрушки с прятками: методы для управления видимостью

jQuery предлагает методы .hide() и .show() для управления видимостью элемента:

$('#toggleButton').click(function() {
  $('#myDiv').toggle(); // Div либо спрятан, либо показывается
});

Усвоение контроля над видимостью

Создание пользовательских функций для проверки видимости

В сложных ситуациях, например, когда нужно проверять наличие элемента в области просмотра, можно расширить функционал jQuery:

// Дополняем jQuery функцией, проверяющей видимость элемента в области просмотра
$.fn.isVisibleInViewPort = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

if ($('#myDiv').isVisibleInViewPort()) {
  // Div виден, его нельзя спрятать
}

Особенности взаимодействия с элементами, спрятанными другими способами

Примечательно, но элементы с opacity: 0 или элементы вне области просмотра всё равно считаются видимыми в JavaScript с точки зрения jQuery:

$('#transparentDiv').is(':visible') // true, вопреки полной прозрачности
$('#offScreenDiv').is(':visible')   // true, jQuery не учитывает выход за пределы экрана

Оптимизация производительности

Применение селектора :visible в больших DOM может снижать производительность. Для повышения производительности лучше использовать специфичные селекторы или ограничивать область перебора:

// Неоптимальный поиск: медленное решение
$('div:visible').doSomething();

// Оптимизированный поиск: быстрый вариант
$('#parent').find('div').filter(':visible').doSomething();

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

1. :visible Selector | API-документация jQuery – Официальное объяснение использования селектора :visible.
2. Как проверить, виден ли элемент после прокрутки? – Stack Overflow – Обмен сообщества по вопросу видимости после прокрутки.
3. visibility – CSS: Cascading Style Sheets | MDN – Глубинное изучение видимости через CSS на MDN.
4. Как переключаться между скрытием и показом элемента — Простое руководство по управлению видимостью элементов.
5. Как могу я проверить, скрыт ли элемент в jQuery? – Stack Overflow – Обсуждение способов определения скрытых элементов.
6. .hide() | API-документация jQuery – Разъяснение метода .hide() в документации jQuery.
7. .show() | API-документация jQuery – Изучение метода .show() в официальной документации jQuery.