Как запустить функцию при наличии элемента на странице?

Question

[weranda]

Приветствую

Есть пара функций. Одна должна срабатывать при наличии элемента на странице, а вторая при наличии элемента на странице с определенным атрибутом. Что-то я запутался. Подскажите как именно корректно отследить наличие элемента на странице и при его отсутствии. Конкретные примеры приветствуются.

Пример:

<!-- если элемент есть, запускаем функцию №1 -->
<div class="my-class"></div>

<!-- если элемент есть, если у элемента есть атрибут запускаем функцию №2 -->
<div class="my-class" data-attr="my-attribute"></div>

<!-- если элемента нет, ничего не делаем -->

Answer 1

[Антон]

if($('.class').length), по сути будет проверять наличие элемента
или if($('[data-attr="my-attribute"]').length)

Comments

[weranda]

Спасибо!

Answer 2

[Владимир Проскурин]

if($('.my-class').length) {
  if($('.my-class').is('[data-attr]')) {
    alert('С атрибутом');
  } else {
    alert('Без атрибута');
  }
}

Comments

[weranda]

Спасибо!

[weranda]

А почему не срабатывает такая запись?

if ( $('.my-class') ) {
    alert('Элемент есть')
}

Вернее, срабатывает, но срабатывает даже там, где элемента нет.

[Владимир Проскурин]

Потому, что $('.my-class') возвращает объект jQuery, а в JavaScript, все объекты в логическом преобразовании всегда true, даже массивы (а они тоже объекты). Поэтому надо брать другую информацию, например как я взял поле length, которая в случае нуля будет преобразована в false.

[weranda]

Владимир Проскурин, Понял. Спасибо за разъяснения.

Answer 3

[Kudis]

$(function(){
    var $myDom = $('.my-class');
    if ($myDom.length > 0) {
        var myAttr = $myDom.data('attr');
        if (myAttr && myAttr.length > 0) {

            console.log('func 2');

        } else {

            console.log('func 1');

        }
    } else {
        console.log('nothing');
    }
});