没有jQuery的Vanilla JavaScript .closest

时间:2015-02-09 09:26:07

标签: javascript jquery

我正在开发一个只安装了jQuery 1.1且不支持.closest方法的应用程序。

我的脚本目前看起来像这样:

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

所以我正在寻找.navPanel中的每个图像并遍历DOM并隐藏它所在的td。有没有人知道是否有一个vanilla JavaScript函数我可以简单地添加到我的脚本中填充缺失的.closest方法?

感谢您的时间。

2 个答案:

答案 0 :(得分:26)

myImage.parentNode;

就像香草一样。直到你点击所需的标签类型为止,在循环中重复:

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

那应该在普通的旧js中做到这一点。

丹尼

答案 1 :(得分:4)

因为IE仍然不支持element.closest(),最简单的事情就是使用polyfill。

包括this js(这是最近()的填充



(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);




然后它就像IE会理解它一样,并且没有其他任何变化。

<强> from jonathantneal / closest