find没有jQuery的最接近的元素
我正在试图find最具有特定标签名称没有jQuery的元素。 当我点击一个<th>我想访问该表的<tbody> 。 build议？ 我读了关于抵消，但不是太了解它太多。 我应该只使用：
假设已经设置了点击元素
th.offsetParent.getElementsByTagName('tbody')[0]
感谢您的帮助！
很less（非常）迟到了党，但仍然。 这应该做的伎俩 ：
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; }
很简单：
el.closest('tbody')
除IE以外的所有浏览器都支持。
更新 ：Edge现在也支持它。
不需要jQuery。 更重要的是，用$(this).closest('tbody')replacejQuery的$(this).closest('tbody') $(this.closest('tbody'))会显着提高性能，当元素没有find时。
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; } };
请注意，没有find元素时没有return ，当最近的元素没有find时有效地返回undefined 。
有关更多详细信息，请参阅： https ： //developer.mozilla.org/en-US/docs/Web/API/Element/closest
下面是如何通过没有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');
function closest(el, sel) { if (el != null) return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel)); }
此解决scheme使用了HTML 5规范的一些更新function，并且在较老的/不兼容的浏览器（阅读：Internet Explorer）上使用此function将需要一个polyfill。
Element.prototype.matches = (Element.prototype.matches || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || Element.prototype.webkitMatchesSelector || Element.prototype.webkitMatchesSelector);
这是我正在使用的简单function：
function closest(el, selector) { var matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches'); while (el.parentElement) { if (el[matches](selector)) return el; el = el.parentElement; } return null; }
要解释@SalmanPK的答案
它将允许使用节点作为select器，在处理像mouseover这样的事件时非常有用。
function closest(el, selector) { if (typeof selector === 'string') { matches = el.webkitMatchesSelector ? 'webkitMatchesSelector' : (el.msMatchesSelector ? 'msMatchesSelector' : 'matches'); while (el.parentElement) { if (el[matches](selector)) { return el }; el = el.parentElement; } } else { while (el.parentElement) { if (el === selector) { return el }; el = el.parentElement; } } return null; }
我今天为自己写了一个小function。 也许它有帮助：
function findClosestParent (startElement, fn) { var parent = startElement.parentElement; if (!parent) return undefined; return fn(parent) ? parent : findClosestParent(parent, fn); }
要通过标签名称find最近的父母，可以像这样使用它：
findClosestParent(x, element => return element.tagName === "SECTION");
在包含类，ID，数据属性或标记的树上获取最接近的DOM元素。 包含元素本身。 支持回到IE6。
var getClosest = function (elem, selector) { var firstChar = selector.charAt(0); // Get closest match for ( ; elem && elem !== document; elem = elem.parentNode ) { // If selector is a class if ( firstChar === '.' ) { if ( elem.classList.contains( selector.substr(1) ) ) { return elem; } } // If selector is an ID if ( firstChar === '#' ) { if ( elem.id === selector.substr(1) ) { return elem; } } // If selector is a data attribute if ( firstChar === '[' ) { if ( elem.hasAttribute( selector.substr(1, selector.length - 2) ) ) { return elem; } } // If selector is a tag if ( elem.tagName.toLowerCase() === selector ) { return elem; } } return false; }; var elem = document.querySelector('#some-element'); var closest = getClosest(elem, '.some-class'); var closestLink = getClosest(elem, 'a'); var closestExcludingElement = getClosest(elem.parentNode, '.some-class');
这里。
function findNearest(el, tag) { while( el && el.tagName && el.tagName !== tag.toUpperCase()) { el = el.nextSibling; } return el; }
只能find树下的兄弟姐妹。 使用previousSibling去另一种方式或使用variables来遍历这两种方式并返回先find的。 你得到了一般的想法，但如果你想遍历父节点或孩子，如果兄弟不匹配，你可以使用jQuery。 在这一点上，它是很容易的。
查找最近的元素childNodes。
closest:function(el, selector,userMatchFn) { 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; }); function findInChilds(el){ if(!el) return false; if(el && el[matchesFn] && el[matchesFn](selector) && userMatchFn(el) ) return [el]; var resultAsArr=[]; if(el.childNodes && el.childNodes.length){ for(var i=0;i< el.childNodes.length;i++) { var child=el.childNodes[i]; var resultForChild=findInChilds(child); if(resultForChild instanceof Array){ for(var j=0;j<resultForChild.length;j++) { resultAsArr.push(resultForChild[j]); } } } } return resultAsArr.length?resultAsArr: false; } var parent; if(!userMatchFn || arguments.length==2) userMatchFn=function(){return true;} while (el) { parent = el.parentElement; result=findInChilds(parent); if (result) return result; el = parent; } return null;
}
