Vanilla JavaScript .closest 没有 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28406403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vanilla JavaScript .closest without jQuery
提问by William Li
I'm working on an application that only has jQuery 1.1 installed which dosn't support the .closest method.
我正在开发一个只安装了不支持 .closest 方法的 jQuery 1.1 的应用程序。
My script currently looks like this:
我的脚本目前看起来像这样：
$('.navPanel').find('img').closest('td').hide();
So I'm looking for every image in the .navPanel and traversing up the DOM and hiding the td that it sits in. Does anyone know if there is a vanilla JavaScript function I could simply add to my script that polyfills the missing .closest method?
所以我正在寻找 .navPanel 中的每个图像并遍历 DOM 并隐藏它所在的 td。有谁知道是否有一个普通的 JavaScript 函数我可以简单地添加到我的脚本中，该函数可以填充缺少的 .closest 方法?
Thanks for your time.
谢谢你的时间。
回答by jpoppe
Modern browsers have the Element.closest() method.
现代浏览器具有 Element.closest() 方法。
Example:
例子：
document.querySelector('.navPanel img').closest('td')
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
参考：https: //developer.mozilla.org/en-US/docs/Web/API/Element/closest
Here you can check which browsers have built-in support: https://caniuse.com/#feat=element-closest
您可以在此处查看哪些浏览器具有内置支持：https: //caniuse.com/#feat=element-closest
When there is no support in the browser the following polyfill could be used: https://github.com/jonathantneal/closest
当浏览器不支持时，可以使用以下 polyfill：https: //github.com/jonathantneal/closest
回答by allnodcoms
myImage.parentNode;
Is as vanilla as it gets. Whack that in a loop until you hit the required tag type:
就像它得到的一样香草。循环重击，直到您找到所需的标签类型：
while(thisTag.parentNode.tagName !== 'TD') // uppercase in HTML, lower in XML
{
thisTag=thisTag.parentNode;
}
That should do the trick in plain old js.
这应该可以在普通的旧 js 中解决问题。
Danny
丹尼
回答by caramba
Cause IE still does not support element.closest()the simplest thing to do is use include the polyfill from MDN Element.closest(). Include it at the very beginning of your javascript codes.
因为 IE 仍然不支持element.closest()最简单的方法是使用包含来自MDN Element.closest()的 polyfill 。将它包含在您的 javascript 代码的最开头。
For browsers that do not support Element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning IE9+), include this polyfill:
对于不支持 Element.closest() 但支持 element.matches()（或前缀等价物，即 IE9+）的浏览器，包括这个 polyfill：
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this;
do {
if (Element.prototype.matches.call(el, s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}
However, if you really do require IE 8 support, then the following polyfill will do the job very slowly, but eventually. However, it will only support CSS 2.1 selectors in IE 8, and it can cause severe lag spikes in production websites.
但是，如果您确实需要 IE 8 支持，那么下面的 polyfill 会非常缓慢地完成这项工作，但最终会完成。但是，它仅支持 IE 8 中的 CSS 2.1 选择器，并且可能会导致生产网站出现严重的延迟峰值。
if (window.Element && !Element.prototype.closest) {
Element.prototype.closest =
function(s) {
var matches = (this.document || this.ownerDocument).querySelectorAll(s),
i,
el = this;
do {
i = matches.length;
while (--i >= 0 && matches.item(i) !== el) {};
} while ((i < 0) && (el = el.parentElement));
return el;
};
}
