Ванильный JavaScript.closest без jQuery

Я работаю над приложением, в котором установлен только jQuery 1.1, который не поддерживает метод .closest.

Теперь мой script выглядит следующим образом:

$('.navPanel').find('img').closest('td').hide();

Итак, я ищу каждое изображение в .navPanel и обследую DOM и скрываю td, в котором он сидит. Кто-нибудь знает, есть ли функция ванильного JavaScript, которую я мог бы просто добавить в свой script, который полиполняет отсутствующий метод .closest?

Спасибо за ваше время.

Ответы

Ответ 1

Вы можете использовать .parents() с селектором eq. оба родителя и селектор эквалайзера добавлены в версии 1.0:

$('.navPanel').find('img').parents('td').eq(0).hide();

Ответ 2

У современных браузеров есть метод Element.closest().

Пример:

document.querySelector('.navPanel img').closest('td')

Ссылка: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

Здесь вы можете проверить, какие браузеры имеют встроенную поддержку: https://caniuse.com/#feat=element-closest

Если в браузере нет поддержки, можно использовать следующий polyfill: https://github.com/jonathantneal/closest

Ответ 3

myImage.parentNode;

Как ваниль, как она получается. Удалите это в цикле, пока не нажмете требуемый тип тега:

while(thisTag.parentNode.tagName !== 'TD') // uppercase in HTML, lower in XML
    {
     thisTag=thisTag.parentNode;
    }

Это должно сделать трюк в простых старых js.

Дэнни

Ответ 4

Потому что IE по-прежнему не поддерживает element.closest() самое простое, что нужно сделать - это использовать polyfill.

Включите следующие js это polyfill для closest()

(function (ElementProto) {
	if (typeof ElementProto.matches !== 'function') {
		ElementProto.matches = ElementProto.msMatchesSelector || ElementProto.mozMatchesSelector || ElementProto.webkitMatchesSelector || function matches(selector) {
			var element = this;
			var elements = (element.document || element.ownerDocument).querySelectorAll(selector);
			var index = 0;

			while (elements[index] && elements[index] !== element) {
				++index;
			}

			return Boolean(elements[index]);
		};
	}

	if (typeof ElementProto.closest !== 'function') {
		ElementProto.closest = function closest(selector) {
			var element = this;

			while (element && element.nodeType === 1) {
				if (element.matches(selector)) {
					return element;
				}

				element = element.parentNode;
			}

			return null;
		};
	}
})(window.Element.prototype);