Существует ли в jQuery функция exists() для проверки существования элемента?

Правильный способ проверки существования элемента в jQuery

В jQuery нет встроенного метода exists(). Это распространённое заблуждение среди новичков. Однако разработчики jQuery предусмотрели элегантное решение, используя свойство .length объекта jQuery.

Почему .length работает

Когда вы пишете $('#myModal'), jQuery возвращает объект-коллекцию, даже если элемент не найден. Если элемент существует, в коллекции будет один элемент, и .length вернёт 1. Если элемента нет — 0 (что в JavaScript считается false).

Базовый пример

// Проверка через .length
if ($('#myModal').length) {
    console.log('Элемент найден!');
    $('#myModal').show();
} else {
    console.log('Элемент не найден');
}

// Альтернативная запись (более явная)
if ($('#myModal').length > 0) {
    // действия
}

Создание собственного плагина exists()

Если вам очень хочется использовать синтаксис с методом, вы можете расширить jQuery:

// Добавляем метод exists() в jQuery
$.fn.exists = function() {
    return this.length > 0;
};

// Использование
if ($('#myModal').exists()) {
    $('#myModal').fadeIn();
}

Продвинутые техники

• Проверка в цепочке методов — часто используется для условного выполнения:

$('#myModal').length && $('#myModal').show();
// Или более короткая запись:
$('#myModal').length && $(this).show();

• Проверка нескольких элементов — .length возвращает количество найденных элементов:

if ($('.myClass').length >= 3) {
    console.log('Найдено 3 или более элемента');
}

Важные нюансы

Не путайте .length с .size() — последний метод устарел и удалён из jQuery 3.0. Всегда используйте .length.

Также помните: даже если селектор возвращает пустую коллекцию, вы можете вызывать на ней методы jQuery без ошибок — они просто не будут выполняться. Например:

$('#несуществующийЭлемент').addClass('active'); // Ошибки не будет

Это поведение называется "graceful degradation" (безопасное вырождение) и является одной из сильных сторон jQuery.

// Проверка через querySelector
const modal = document.querySelector('#myModal');
if (modal) {
    modal.style.display = 'block';
}

// Проверка через getElementById (быстрее)
const modalById = document.getElementById('myModal');
if (modalById) {
    modalById.classList.add('active');
}