纯JavaScript实现.closest方法（不使用jQuery）

Question

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

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

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

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

感谢您的时间。

- William Li

---

.parents()? - Artyom Neustroev

jQuery 1.1已经超过8年了！难道你真的无法更新它吗？ - Rory McCrossan

也许这个可以帮到你，对于纯JS：http://stackoverflow.com/questions/28348386/javascript-cut-table-to-insert-a-tag-div/28353551#28353551 - Xotic750

"reluctant" - Xotic750

@ZakariaAcharki - 请不要再使用“vanilla-js”标记问题了。它只是JavaScript。 - j08691

Answer 1

现代浏览器拥有Element.closest()方法。

示例:

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

参考资料： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest

您可以在此查看哪些浏览器拥有内置支持： https://caniuse.com/#feat=element-closest

如果浏览器不支持，则可以使用以下 polyfill： https://github.com/jonathantneal/closest

- jpoppe

---

这就是答案。非常感谢您教我不知道的东西 - 并提供polyfill的链接。 - jeremysawesome

目前在IE和Edge上无法正常工作。来源 - Dmitry Shvetsov

Answer 2

myImage.parentNode;

这是最基础的方法。将其放在循环中，直到达到所需的标记类型：

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

那应该就可以用纯旧版 JavaScript 完成了。

Danny

- allnodcoms

---

当然，这会有一个问题，如果您没有找到它并且到了document，它将会出错 :) - Xotic750

@Xotic750 - 非常正确，它会以可怕的方式死亡，但这就是 JavaScript ;) - allnodcoms

然后只需添加一个检查器，如果 while 循环遇到了 HTML 标记，则跳出循环。 - Benjamin Intal

我仍然无法相信他们把那个叫做.tagName而不是.elementName :-/ - Herbert Van-Vliet

Answer 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;
  };
}

- caramba