Наличие элемента jquery: jQuery. Как проверить существует ли элемент на странице?

Проверка существования свойства | JS: Объекты

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В работе с объектами иногда бывает нужно проверить наличие свойства и выполнить особую логику в случае его отсутствия. Проще всего такая проверка выполняется через сравнение с undefined, но этот подход не универсальный. При определенных условиях он сработает неверно.

if (obj.key === undefined) {
  // логика
}

Представьте себе функцию, которая должна посчитать количество повторяющихся элементов в массиве:

// Вход
const bag = [
  'apple', 'banana', 'pear',
  'apricot', 'apple', 'banana',
  'apple', 'orange', 'pear',
];
// Выход
const result = {
  apple: 3,
  banana: 2,
  pear: 2,
  orange: 1,
  apricot: 1,
};

Алгоритм ее работы достаточно прост, но есть один тонкий момент. Во время обхода массива эта функция берет объект-результат, извлекает из него нужное свойство и увеличивает значение на единицу. Но это в случае, когда свойство уже есть. А если его нет? Так как изначально объект-результат пустой, то когда элемент массива появляется первый раз, в объекте нужно создавать соответствующее свойство со значением 1. Посмотрите на реализацию:

const countFruits = (fruits) => {
  const result = {};
  for (const name of fruits) {
    // Проверка на существование
    if (result[name] === undefined) {
      result[name] = 1;
    } else {
      result[name] += 1;
    }
  }
  return result;
};

В подобной ситуации сравнение значения с undefined сработает всегда, но только потому, что undefined не может оказаться внутри существующего свойства. Но бывает и по-другому. Посмотрите на код:

const obj = {
  key: doSomething(),
};

В примере выше значением key станет результат вызова функции doSomething(). Если эта функция может вернуть undefined, то окажется, что в объекте ключ key определен, но его значение

undefined.

В JavaScript есть более надежный и более правильный по смыслу способ проверить существование свойства, не сравнивая значения – это метод Object.hasOwn(). Вот как меняется функция countFruits(), если использовать этот метод:

const countFruits = (fruits) => {
  const result = {};
  for (const name of fruits) {
    // Проверка на существование
    if (Object.hasOwn(result, name)) {
      result[name] += 1;
    } else {
      result[name] = 1;
    }
  }
  return result;
};

Конкретно в нашем примере с поиском фруктов, внутри результирующего объекта не может оказаться undefined просто так в качестве значения. Там всегда будет какое-то число, начиная от единицы. Более того, даже проверка на наличие значения лишняя. Всё, что нам нужно – извлекать текущее значение с возможностью задать значение по умолчанию. Сделать это можно, воспользовавшись оператором нулевого слияния. Он позволяет задать значение по умолчанию в случае, когда оно равно

null или undefined.

let value;
value ?? 'wow'; // 'wow'
value = null;
value ?? 'wow'; // 'wow'
value = true;
value ?? 'wow'; // true

for (const name of fruits) {

jquery проверить наличие элемента на странице

Материал из JQuery

Проверяет, удовлетворяет ли заданному селектору хотя бы один из выбранных элементов.

Проверяет, есть ли среди выбранных элементов, хотя бы один из элементов заданного объекта jQuery.

Проверяет, есть ли среди выбранных элементов, элемент elem (задается объектом DOM-элемента).

$(«div»).is(«.lBlock»)	проверит, имеется ли на странице div-элемент(ы) с классом lBlock.
$(«.lBlock»).is(«#area»)	проверит, имеется ли среди элементов с классом lBlock, элементы с идентификатором area.

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

Подсказка: иногда необходимо проверить, соответствуют ли все выбранные элементы заданному селектору:

До jQuery-1.7, метод .is() обладал небольшой логической ошибкой. При использовании позиционных селекторов, таких как :first, :gt() или :even, метод .is() смотрел позицию относительно расположения элементов в объекте jQuery, а не в документе. Поэтому, например, если объект jQuery содержал все элементы одного списка:

возвратило бы ожидаемое значение true, а вот выражение

уже оказалось бы равным false.

В jQuery-1.7 этот недостаток был устранен и при использовании позиционных селекторов в методе .is(), библиотека jQuery делает проверку относительно расположения элементов внутри документа, а не текущего объекта jQuery.

На практике приходится очень часто проверять существует ли элемент на веб-странице или нет.

Например, задача может быть следующей:

если на странице есть блок div с атрибутом id, то нужно выполнить какие-то действия с элементами, которые в нем находятся.

Такую проверку очень важно производить. Если в скрипте будет запрашиваться элемент, которого нет на странице, то будет ошибка. Скорее всего, вы знаете, насколько могут быть опасны ошибки в Javascript, весь код который расположен ниже, может просто не обрабатываться.

Поэтому производить проверку существования элемента — это очень важный момент.

Хочу рассказать о способе, как это можно сделать с помощью библиотеки Jquery.

$(«#mydiv»).length – это выражение будет возвращать true, когда скрипту удалось найти элемент и false в противном случае. Именно этот принцип работы и позволяет выполнить необходимую проверку.

Если у вас появляется окно такого вида, значит, все работает нормально.

В этом записи я поделюсь простым снипетом, который позволит вам проверить существует ли элемент на странице.

Изначально хочу уничтожить слух о существовании jQuery exists метода — его просто нет. Место него есть другие функции, которые позволяет проверить наличие элемента на странице.

Возможно, что разработчики jQueru планируют добавить такую функцию, но сейчас ее нет и приходится пользоваться альтернативными методами.

Например, вы хотите найти какой-то элемент на странице, то можете сделать как показано на примере ниже:

Метод length возвращает 1(true) или 0 (false) , 1 — это если элемент существует, а 0 — если нет.

Если вам все же хочется восспользоваться чем-то похожим на exists в jQuery, то можно восспользоваться следующим снипетом:

В примере выше, создается мини плагин, который называется exists , который возвращает проверку на наличие элемента на странице.

C exists() , читабельность кода будет намного выше, чем с length методом. exists() метод сразу говорит о том, что происходит на определенном участке кода, когда length не совсем понятно что из себя представляет.

Как проверить, пуст ли HTML-элемент с помощью jQuery

1 ответ на этот вопрос.

0 голосов

Связанные вопросы в Java-Script

Привет Картик, попробуй следующий скрипт <скрипт> (window. onload = … ПОДРОБНЕЕ

ответил 24 сент. 2020 г. в Java-скрипте к Окугбе • 280 баллов • 703 просмотра

• HTML
• CSS
• PHP
• JavaScript
• ларавель
• угловой

Привет @ Арпит В JavaScript все «правда» или … ПОДРОБНЕЕ

ответил 8 сент. 2020 г. в Java-скрипте к Нирой • 82 820 баллов • 176 просмотров

Какой самый быстрый и эффективный способ определить, имеет ли массив JavaScript значение? Единственный метод, о котором я знаю, заключается в следующем: функция содержит (а, объект) { … ПОДРОБНЕЕ

23 сентября в Java-скрипте к Абхиная • 1160 баллов • 65 просмотров

• JavaScript
• массивов
• алгоритм

Привет @картик, Попробуй это: вар объект = {}; вернуть Object.keys(obj).length; Надежда .

.. ПОДРОБНЕЕ

ответил 28 августа 2020 г. в Java-скрипте к Нирой • 82 820 баллов • 220 просмотров

• HTML
• CSS
• JavaScript
• ларавель
• PHP

Привет @картик, Сначала вы должны пойти в … ПОДРОБНЕЕ

ответил 18 марта 2020 г. в Ларавеле к Нирой • 82 820 баллов • 16 841 просмотр

• HTML
• CSS
• JavaScript
• ларавель
• угловой
• PHP

Именованный маршрут используется для предоставления конкретных … ПОДРОБНЕЕ

ответил 18 марта 2020 г. в Ларавеле к Нирой • 82 820 баллов • 1,965 просмотров

• HTML
• CSS
• JavaScript
• ларавель
• PHP

Привет, Это просто, вам просто нужно … ПОДРОБНЕЕ

ответил 23 марта 2020 г. в Ларавеле к Нирой • 82 820 баллов • 1644 просмотра

• HTML
• CSS
• JavaScript
• ларавель
• PHP

Привет @картик, Именованная маршрутизация — еще одна замечательная особенность … ПОДРОБНЕЕ

ответил 23 марта 2020 г. в Ларавеле к Нирой • 82 820 баллов • 24 144 просмотра

• HTML
• CSS
• JavaScript
• ларавель
• PHP

Привет @картик, Вы можете использовать CSS: class .hide { … ПОДРОБНЕЕ

ответил 8 июня 2020 г. в Java-скрипте к Нирой • 82 820 баллов • 370 просмотров

• HTML
• CSS
• JavaScript
• PHP
• ларавель

Привет @картик, Ты можешь использовать: jQuery(‘[name=»‘ + nameAttributeValue + … ПОДРОБНЕЕ

ответил 11 июня 2020 г. в Java-скрипте к Нирой • 82 820 баллов • 370 просмотров

• HTML
• CSS
• JavaScript
• ларавель
• PHP

• Все категории
• Апач Кафка (84)
• Апач Спарк (596)
• Лазурный (131)
• Большие данные Hadoop (1907)
• Блокчейн (1673)
• С# (141)
• С++ (271)
• Консультирование по вопросам карьеры (1060)
• Облачные вычисления (3426)
• Кибербезопасность и этичный взлом (147)
• Аналитика данных (1266)
• База данных (855)
• Наука о данных (75)
• DevOps и Agile (3555)
• Цифровой маркетинг (111)
• События и актуальные темы (28)
• IoT (Интернет вещей) (387)
• Ява (1247)
• Котлин (8)
• Администрирование Linux (389)
• Машинное обучение (337)
• Микростратегия (6)
• PMP (423)
• Power BI (516)
• питон (3183)
• РПА (650)
• SalesForce (92)
• Селен (1569)
• Тестирование программного обеспечения (56)
• Таблица (608)
• Таленд (73)
• ТипСкрипт (124)
• Веб-разработка (3002)
• Спросите нас о чем угодно! (66)
• Другие (1645)
• Мобильная разработка (263)

Подпишитесь на нашу рассылку и получайте персональные рекомендации.

Уже есть учетная запись? .

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

Элемент является компонентом HTML-документа. Вам нужно проверьте, существует ли элемент перед доступом к нему, чтобы избежать null или undefined ошибки.

Вы можете проверить, существует ли элемент в JQuery, используя оператор if ($('#elementId').length) .

В этом руководстве вы узнаете, как проверить, существует ли элемент в JQuery.

Если вы спешите…

Используйте приведенный ниже код, чтобы проверить, существует ли элемент с помощью JQuery.

 если ($('#  elementId  ').длина){
  // Делаем что-то, если элемент существует
} 

Если вы хотите понять подробности, читайте дальше…

При использовании JQuery вам нужно использовать $() или JQuery() для обозначения объекта jquery и префикса # в идентификатор элемента, чтобы выбрать элемент, используя его ID .

Содержание

Добавление ссылки JQuery

Добавьте приведенную ниже ссылку в сценарий Jquery. В противном случае вы получите Uncaught ReferenceError: $ не определен Ошибка при попытке доступа к элементам с использованием $.

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

В этом разделе вы будете использовать jquery, чтобы проверить, существует ли элемент, используя идентификатор элемента и свойство length .

Свойство длины jquery возвращает количество совпадающих элементов с указанным идентификатором .

Вам нужно добавить префикс # в идентификатор элемента и получить доступ к свойству длины, чтобы найти количество доступных элементов с ID .

При использовании этого оператора в пределах if , if конструкция будет оцениваться как True , когда есть один или несколько элементов с id . Когда нет доступного элемента с указанным id , он вернет 0 . Это оценит оператор if как false .

Код

Используйте приведенный ниже оператор, чтобы проверить, доступен ли элемент с идентификатором elementid в HTML-документе.

 если ($('#  elementId  ').длина){
  // Делаем что-то, если элемент существует
} 

Проверить, существует ли элемент в массиве

В этом разделе вы будете использовать JQuery для проверки существования элемента в массиве.

Когда вы выбираете объект с id с помощью $ , элемент с определенным id будет возвращен в виде массива.

В массиве можно проверить первую позицию массива. Если элемент существует, сам элемент будет доступен в массиве. Следовательно, оператор if будет оцениваться как True, и вы можете выполнять нужные операторы внутри конструкции if.

Если элемент недоступен, будет возвращено значение undefined и оператор if не будет выполнен.

Код

 if ( $('#  elementId  ')[0] ) {
  // Делаем что-то, если элемент существует
} 

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

Если вы хотите проверить, существует ли элемент, используя имя его класса, вы можете использовать свойство длины.

 если ($('#  elementclass  ').length){
  // Делаем что-то, если класс существует
} 

Если вы хотите проверить, существует ли объект с определенным классом в div , вы можете использовать приведенный ниже код. Он проверит, существует ли элемент с именем класса elementclass в div .

 если ($('  div.elementclass  ').length) {
    // Делаем что-то, если класс существует
} еще {
    // Делаем что-то, если класса не существует
} 

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

Вы можете использовать то же свойство длины для проверки существования элемента по имени элемента.

Просто используйте #elementname в селекторе.