没有jQuery找到最接近的元素

Question

我试图找到没有jquery的具有特定标签名称的最接近的元素.当我点击一个<th>我想要访问<tbody>该表时.建议？我读过有关偏移的内容,但并没有真正理解它.我应该使用:

假设th已经设置为单击了元素

th.offsetParent.getElementsByTagName('tbody')[0]

Answer 1

非常简单:

el.closest('tbody')

除IE以外的所有浏览器均支持
更新:Edge现在也支持它.

不需要jQuery.更过,更换jQuery的$(this).closest('tbody')使用$(this.closest('tbody'))将提高性能,显著时未找到该元素.

适用于IE的Polyfill:

if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector;
if (!Element.prototype.closest) Element.prototype.closest = function (selector) {
    var el = this;
    while (el) {
        if (el.matches(selector)) {
            return el;
        }
        el = el.parentElement;
    }
};

请注意,找不到return元素时没有,undefined当找不到最接近的元素时有效返回.

有关更多详细信息,请参阅:https: //developer.mozilla.org/en-US/docs/Web/API/Element/closest

Answer 2

派对很少(很晚),但是.这应该做的伎俩:

function closest(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches','webkitMatchesSelector','mozMatchesSelector','msMatchesSelector','oMatchesSelector'].some(function(fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    })

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

Answer 3

以下是如何在没有jQuery的情况下按标签名称获取最接近的元素:

function getClosest(el, tag) {
  // this is necessary since nodeName is always in upper case
  tag = tag.toUpperCase();
  do {
    if (el.nodeName === tag) {
      // tag name is found! let's return it. :)
      return el;
    }
  } while (el = el.parentNode);

  // not found :(
  return null;
}

getClosest(th, 'tbody');

Answer 4

function closest(el, sel) {
    if (el != null)
        return el.matches(sel) ? el 
            : (el.querySelector(sel) 
                || closest(el.parentNode, sel));
}

此解决方案使用HTML 5规范的一些最新功能,并在旧版/不兼容的浏览器(读取:Internet Explorer)上使用此功能将需要填充.

Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector 
    || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector 
    || Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);

Answer 5

有一个标准化的函数可以执行此操作：Element.closest。除IE11之外，大多数浏览器都支持它（caniuse.com会提供详细信息）。该MDN文档还包括如果你有目标旧版浏览器的一个填充工具。

要查找tbody给定的最接近的父级th，可以执行以下操作：

th.closest('tbody');

如果您想自己编写函数，这是我想到的：

function findClosestParent (startElement, fn) {
  var parent = startElement.parentElement;
  if (!parent) return undefined;
  return fn(parent) ? parent : findClosestParent(parent, fn);
}

要通过标签名称查找最接近的父级，可以这样使用：

findClosestParent(x, element => return element.tagName === "SECTION");