Есть ли в jQuery функция для проверки существования элемента на странице?

Почему ваш код не работает

Дело в том, что jQuery всегда возвращает объект jQuery, даже если селектор не нашел ни одного элемента. Это так называемый "пустой jQuery-объект" (empty jQuery object). Он ведет себя как обычный объект: его можно сохранить в переменную, вызвать на нем методы (они просто не будут выполняться), и он никогда не будет равен null или false. Поэтому условие if ($('#my-element')) всегда истинно.

Правильное решение: проверка длины коллекции

Самый простой и рекомендуемый способ — проверить свойство length у jQuery-объекта. Если элементов не найдено, длина будет равна 0 (что в JavaScript считается false). Вот как это работает:

// Вариант 1: явная проверка
if ($('#my-element').length > 0) {
    $('#my-element').fadeIn();
}

// Вариант 2: неявное приведение к boolean (0 -> false)
if ($('#my-element').length) {
    $('#my-element').fadeIn();
}

// Вариант 3: можно сохранить объект в переменную для оптимизации
var $element = $('#my-element');
if ($element.length) {
    $element.fadeIn();
}

Обратите внимание на третий вариант: мы сохраняем результат селектора в переменную с префиксом $ (это соглашение для jQuery-объектов). Это позволяет не делать повторный поиск по DOM, если элемент существует.

Почему это не костыль, а нормальная практика

• Это стандартный паттерн jQuery — все опытные разработчики используют проверку .length. Даже в официальной документации jQuery нет отдельного метода exists(), так как в нем нет необходимости.
• Это быстрее, чем любой пользовательский метод, так как .length — это просто числовое свойство, которое вычисляется сразу при создании jQuery-объекта.
• Это читаемо — конструкция if ($('.class').length) понятна любому разработчику, знакомому с jQuery.

Альтернативный подход: превращение в массив

Если вам не нравится проверять .length, можно воспользоваться методом .toArray() или просто обратиться к индексу [0]:

// Превращаем в массив и проверяем
if ($('#my-element').toArray().length) {
    // элемент существует
}

// Или проверяем первый элемент (будет undefined, если нет элементов)
if ($('#my-element')[0]) {
    // элемент существует
}

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

Совет: не переусложняйте

Многие новички пытаются написать свой плагин $.fn.exists или найти магическое решение. Но в мире jQuery проверка через .length — это и есть то самое "элегантное решение". Она используется в тысячах проектов, включая код самого jQuery. Просто запомните это правило и используйте его во всех своих проектах.

Итог: Вместо if ($('#my-element')) пишите if ($('#my-element').length). Это просто, быстро и правильно.

if ($('#my-element').get(0)) {
    // элемент существует
    $('#my-element').fadeIn();
}

$.fn.exists = function() {
    return this.length > 0;
};

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

const element = document.getElementById('my-element');
if (element) {
    element.style.display = 'block';
}