没有jQuery的Vanilla JavaScript .closest

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

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

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

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

谢谢你的时间。

Answer 1

您可以将.parents()与eq选择器一起使用。 在1.0版中添加了父项和eq选择器：

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

Answer 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

Answer 3

 myImage.parentNode; 

就像香草一样。 直到你点击所需的标签类型为止：

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

这应该是普通老js的伎俩。

丹尼

Answer 4

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

包括这个js （这是最接近（）的polyfill）

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