Vanilla JavaScript .closest 没有 jQuery答案

【问题标题】：Vanilla JavaScript .closest without jQueryVanilla JavaScript .closest 没有 jQuery
【发布时间】：2021-08-23 01:12:49
【问题描述】：

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

我的脚本目前如下所示：

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

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

感谢您的宝贵时间。

【问题讨论】：

.parents()?
stackoverflow.com/questions/15329167/…
嗨，应该说 .parent() 在这种情况下不起作用，因为某些页面，img 有一个环绕它的 href 标签，它将删除这个元素而不是 td。所以它确实需要找到最近的 td
jQuery 1.1 已经8 岁多了！真的没有办法更新吗？
“不情愿”或“懒惰”！ :D

标签： javascript jquery

【解决方案1】：

现代浏览器有 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

【讨论】：

这就是答案。非常感谢你教给我一些我不知道的东西 - 并提供了 polyfill 的链接。
目前这在 IE 和 Edge 中不起作用。 source

【解决方案2】：

myImage.parentNode;

尽其所能。循环敲打，直到您达到所需的标签类型：

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

这应该可以在普通的旧 js 中解决问题。

丹尼

【讨论】：

当然这有一个问题，如果你没有找到它并到达document，那么它就会消失。 :)
@Xotic750 - 非常正确，它会以可怕的方式死去，但这是 javascript ;)
如果while命中了html标签就添加一个checker然后跳出循环

【解决方案3】：

因为 IE 仍然不支持 document.querySelector('.element').closest() 最简单的方法是包含来自 MDN Element.closest() 的 polyfill。将它包含在您的 javascript 代码的最开头。

对于不支持 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;
  };
}

但是，如果您确实需要 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;
  };
}

【讨论】：