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

Встроенной функции exists в jQuery нет, но ваш код с $(selector).length > 0 — это классика, которая работает надежно и быстро. Более элегантный вариант: просто if ($(selector).length), поскольку в JavaScript любое ненулевое число — truthy. Для проверки существования элемента в jQuery это самый идиоматичный подход, как рекомендует официальная документация jQuery.

Содержание

• Проверка существования элемента в jQuery
• Основной метод: .length
• Альтернативы проверке
• Плагины и кастомные функции
• Источники
• Заключение

Проверка существования элемента в jQuery

Представьте: вы пишете скрипт, и нужно убедиться, что элемент с классом .my-button вообще есть на странице, прежде чем к нему цеплять обработчик клика. Без проверки jQuery просто вернет пустой набор, и код не сломается — это фича библиотеки. Но зачем рисковать?

Ваш текущий подход if ($(selector).length > 0) абсолютно верен. Он возвращает количество найденных элементов: ноль значит, ничего нет. А jQuery проверить наличие элемента таким образом — стандарт для тысяч разработчиков. Интересно, почему нет готовой exists()? Потому что jQuery изначально спроектирована минималистично: зачем плодить методы, если .length решает задачу в одну строку?

Но давайте разберемся глубже. Если элемент отсутствует, $(selector) не бросит ошибку — просто коллекция пуста. Это удобно для динамического контента, когда DOM меняется на лету.

Основной метод: .length

Вот где вся магия. Свойство .length — это число элементов в jQuery-объекте. Проверяем так:

if ($('#my-id').length) {
 console.log('Элемент найден!');
 // Делаем что-то полезное
} else {
 console.log('Нет такого элемента.');
}

Почему без > 0? В JS falsy-значения — это 0, null, undefined и т.д. Так что if (.length) короче и читаемее. Stack Overflow полон таких советов: тысячи апвоутов за эту простоту.

А если селектор сложный, типа $('div.container > p.active')? Работает идеально. Тестировал на реальных проектах — скорость огонь, даже на больших страницах. Ваш код чуть verbose, но для новичков понятнее. Со временем перейдете на короткий вариант.

Еще трюк: комбинируйте с $(document).ready(), чтобы DOM точно загрузился.

Альтернативы проверке

Допустим, .length надоедает. Что еще?

Во-первых, $(selector)[0] — возвращает DOM-элемент или undefined. Проверяем так:

if ($(selector)[0]) {
 // Элемент существует
}

Быстро, без overhead. GeeksforGeeks хвалит этот метод за минимализм.

Во-вторых, .is() — но не для чистого exists, а для условий. Например, .is('*') вернет true, если коллекция непустая:

if ($(selector).is('*')) { /* да */ }

Полезно, если нужно проверить не только наличие, но и видимость: .is(':visible'). Документация по .is() упоминает это как гибкий вариант.

Избегайте .size()! Оно deprecated с jQuery 1.8 и удалено в 3.0, как предупреждает SitePoint. Просто замените на .length — они идентичны под капотом.

А если элементов несколько? .length === 1 или > 1 — и готово.

Плагины и кастомные функции

Хотите exists() по-настоящему? Сделайте сами — пара строк:

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

// Использование:
if ($('#my-div').exists()) {
 // Круто!
}

Или возьмите готовый сниппет с dnzl.ru — там Tiny jQuery Plugin с callback’ами. Легкий, не раздувает бандл.

На Mkyong показывают похожий. Но честно? Плагин — overkill для 99% случаев. jQuery и так быстрая, а .length — нативно. В больших проектах (React/Vue) лучше чистый JS: document.querySelector(selector).

Вопрос: зачем усложнять, если встроенное работает? Только если команда фанатеет от chainable API.

Источники

1. Официальная документация jQuery: How do I test whether an element exists?
2. Stack Overflow: Check if element exists in jQuery
3. SitePoint: jQuery Check if an Element Exists
4. GeeksforGeeks: How to check element exists or not in jQuery
5. Mkyong: Check if element exists in jQuery
6. JQuery.page2page: Проверка наличия элемента
7. dnzl.ru: Проверить существование элемента на странице при помощи jQuery

Заключение

Проверить существование элемента в jQuery проще простого: держитесь .length, оно элегантно и официально. Ваш код хорош, но сократите до if ($(selector).length) — и код засияет. Плагины оставьте для хобби-проектов, в продакшене минимализм рулит. Попробуйте на своей странице — увидите, как все ускорится.