31

Существует ли функция "exists" в jQuery?

25

Как можно проверить существование элемента в jQuery?

У меня есть следующий код:

if ($(selector).length > 0) {
    // Сделать что-то
}

Существует ли более элегантный способ подойти к этой задаче? Может быть, есть какой-то плагин или функция?

5 ответ(ов)

27

В JavaScript все значения могут быть истинными (truthy) или ложными (falsy). Для чисел 0 означает false, а любые ненулевые значения означают true. Поэтому вы можете написать:

if ($(selector).length)

Вам не нужно добавлять часть >0.

1

Самый быстрый и понятный с семантической точки зрения способ проверить существование элемента — это использование чистого JavaScript:

if (document.getElementById('element_id')) {
    // Выполнить какое-то действие
}

Хотя этот способ немного длиннее, чем аналогичный вариант на jQuery, он выполняется быстрее, так как использует нативный метод JS.

Это также предпочтительнее, чем написание собственной функции в jQuery. Такой подход будет медленнее по причинам, уже упомянутым @snover. Кроме того, это может создать иллюзию у других разработчиков, что функция exists() является частью jQuery. JavaScript должен быть понятен другим, кто будет редактировать ваш код, благодаря чему избегается увеличение долга знаний.

P.S.: Обратите внимание на отсутствие # перед element_id (поскольку это чистый JS, а не jQuery).

0

Вы можете использовать следующий код:

if ($(selector).length) {
  // Сделать что-то
}

Этот способ немного более изящный, так как проверяет наличие элементов, соответствующих селектору, без необходимости использования универсального селектора '*'. Если .length больше нуля, это означает, что элементы существуют, и вы можете продолжить с выполнением нужных действий.

0

Вы можете сэкономить несколько байт, написав:

if ($(selector)[0]) { ... }

Это работает, потому что каждый объект jQuery также ведет себя как массив, и мы можем использовать оператор разыменования массива, чтобы получить первый элемент из массива. Если элемента по указанному индексу нет, будет возвращено undefined.

0

Большинство ответов здесь неточные, и эта проверка длины элементов может быть приемлемой в многих случаях, но она не даёт 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

Таким образом, данная функция более надёжно определяет, существует ли элемент, проверяя и его тип.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь