Как отследить появление класса у элемента?

Question

[Егор Огурцов]

Есть группа элементов, у у них по очереди и не только периодически появляется некий класс (представим, что нет несжатых исходников всех остальных библиотек и скриптов). Как отследить появление и удаление этого класса и по этому событию выполнить другое действие?

Answer 1

[Денис Инешин]

Вам потребуется MutationObserver.
Вот статья на хабре: habrahabr.ru/post/202366
Вот описание: https://developer.mozilla.org/ru/docs/Web/API/Muta...

Comments

[Егор Огурцов]

Пока ждал ответы - привязался к ссылке, которая назначает класс. Решил проще. Спасибо за другое решение.

Answer 2

[Евгений Петров]

Потребуется и MutationObserver, и Mutation Events для IE10 и ниже.
В итоге получается вот так, включая полифилл

var observeObject = function () {
	var _class = {
		init: function (selector, callback) {
			var element = document.querySelector(selector);

			try {
				var observer = new MutationObserver(function (mutations) {
						mutations.forEach(function (mutation) {
							callback(mutation.target, mutation.attributeName, mutation.oldValue);
						});		
					});

				observer.observe(element, {
					attributes: true,
					subtree: true,
					attributeOldValue: true
				});
			} catch (z) {
				element.addEventListener('DOMAttrModified', function (e) {
					callback(e.target, e.attrName, e.prevValue);
				}, false);
			}
		}
	};

	return _class;
}();

/* А тут инициализируем отслеживание в элементе, передавая селектор */
$(function () {
	observeObject.init('селектор"]', function (target, name, oldValue) {
		/* ссылка на Node, имя атрибута, предыдущее значение */
		console.log(target, name, oldValue);
	});
});

Comments

[Егор Огурцов]

Пока ждал ответы - привязался к ссылке, которая назначает класс. Решил проще. Спасибо за другое решение.

Answer 3

[Хазрат Гаджикеримов]

if ($("selector").hasClass('class')) {
// есть класс
}

Comments

[Егор Огурцов]

ну это сработает при $(document).ready, а как наблюдать группу элементов?

[Хазрат Гаджикеримов]

Егор Огурцов:

$('body').on(event, 'class', function () {
    if ($(this).hasClass('class')) {
       // есть класс
     }
} )

[Fastmind]

Хазрат Гаджикеримов, не работает