我试图在没有 jquery 的情况下找到具有特定标签名称的最近元素。当我单击 a 时,<th>
我想访问<tbody>
该表的 。建议?我阅读了有关偏移量的内容,但并没有真正了解它。我应该只使用:
假设 th 已经设置为 clicked th 元素
th.offsetParent.getElementsByTagName('tbody')[0]
我试图在没有 jquery 的情况下找到具有特定标签名称的最近元素。当我单击 a 时,<th>
我想访问<tbody>
该表的 。建议?我阅读了有关偏移量的内容,但并没有真正了解它。我应该只使用:
假设 th 已经设置为 clicked th 元素
th.offsetParent.getElementsByTagName('tbody')[0]
很简单的:
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
聚会有点(非常)迟到,但仍然如此。这应该做的伎俩:
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;
}
以下是在不使用 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');
有一个标准化的函数可以做到这一点: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");
function closest(el, sel) {
if (el != null)
return el.matches(sel) ? el
: (el.querySelector(sel)
|| closest(el.parentNode, sel));
}
此解决方案使用 HTML 5 规范的一些最新功能,在较旧/不兼容的浏览器(阅读:Internet Explorer)上使用它需要 polyfill。
Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector
|| Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector
|| Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);