Существует ли функция "exists" в jQuery?
Как можно проверить существование элемента в jQuery?
У меня есть следующий код:
if ($(selector).length > 0) {
// Сделать что-то
}
Существует ли более элегантный способ подойти к этой задаче? Может быть, есть какой-то плагин или функция?
5 ответ(ов)
В JavaScript все значения могут быть истинными (truthy) или ложными (falsy). Для чисел 0
означает false
, а любые ненулевые значения означают true
. Поэтому вы можете написать:
if ($(selector).length)
Вам не нужно добавлять часть >0
.
Самый быстрый и понятный с семантической точки зрения способ проверить существование элемента — это использование чистого JavaScript:
if (document.getElementById('element_id')) {
// Выполнить какое-то действие
}
Хотя этот способ немного длиннее, чем аналогичный вариант на jQuery, он выполняется быстрее, так как использует нативный метод JS.
Это также предпочтительнее, чем написание собственной функции в jQuery. Такой подход будет медленнее по причинам, уже упомянутым @snover. Кроме того, это может создать иллюзию у других разработчиков, что функция exists()
является частью jQuery. JavaScript должен быть понятен другим, кто будет редактировать ваш код, благодаря чему избегается увеличение долга знаний.
P.S.: Обратите внимание на отсутствие #
перед element_id
(поскольку это чистый JS, а не jQuery).
Вы можете использовать следующий код:
if ($(selector).length) {
// Сделать что-то
}
Этот способ немного более изящный, так как проверяет наличие элементов, соответствующих селектору, без необходимости использования универсального селектора '*'
. Если .length
больше нуля, это означает, что элементы существуют, и вы можете продолжить с выполнением нужных действий.
Вы можете сэкономить несколько байт, написав:
if ($(selector)[0]) { ... }
Это работает, потому что каждый объект jQuery также ведет себя как массив, и мы можем использовать оператор разыменования массива, чтобы получить первый элемент из массива. Если элемента по указанному индексу нет, будет возвращено undefined
.
Большинство ответов здесь неточные, и эта проверка длины элементов может быть приемлемой в многих случаях, но она не даёт 100% гарантии. Представьте, если в функцию передано число. Я разработал функцию, которая проверяет все условия и возвращает ответ, как и должно быть:
$.fn.exists = $.fn.exists || function() {
return !!(this.length && (this[0] instanceof HTMLDocument || this[0] instanceof HTMLElement));
}
Эта функция проверит как длину, так и тип элемента. Теперь вы можете проверять наличие элемента таким образом:
$(1980).exists(); // вернёт false
$([1,2,3]).exists(); // вернёт false
$({name: 'stackoverflow', url: 'http://www.stackoverflow.com'}).exists(); // вернёт false
$([{nodeName: 'foo'}]).exists(); // вернёт false
$('div').exists(); // вернёт true
$('.header').exists(); // вернёт true
$(document).exists(); // вернёт true
$('body').exists(); // вернёт true
Таким образом, данная функция более надёжно определяет, существует ли элемент, проверяя и его тип.
Как перенаправить на другую веб-страницу?
Прокрутка к элементу с использованием jQuery
jQuery: Получение Выбранного Значения Из Выпадающего Списка
Как проверить радио-кнопку с помощью jQuery?
Существует ли ссылка на "последнюю" библиотеку jQuery в Google APIs?