原生js 实现jquery 的parents
emer 发布于 2023-2-17 18:49 713 次阅读
function getParents(el, parentSelector /* optional */) { // console.log(el); // If no parentSelector defined will bubble up all the way to *document* if (parentSelector === undefined) { parentSelector = document; } var parents = []; var p = el.parentNode; while (p !== parentSelector) { var o = p; parents.push(o); p = o.parentNode; } parents.push(parentSelector); return parents; }
/*或者*/
/**
* 查找dom的祖先元素 查看是否包含parentSelector的id或者样式的元素
* @param el 传入的dom元素
* @param parentSelector 要查找的祖先元素id名称或者类名
* @returns boolean|HTMLElement
* // getParents(document.getElementById('ResTableList'), '#main或者.main');
*/
export function getParents(el, parentSelector) {
if (!parentSelector ||
parentSelector === undefined) {
throw new Error('请传入要搜索的父元素Id名或者类名#id或者.classname');
}
// 默认匹配的类型
var type = 'className';
var splitF = '.';
// 如果第一个字符是#那么证明传入的是id
if (parentSelector.indexOf('#') === 0) {
type = 'id';
splitF = '#';
}
// 根据类型拆分出字符串
var selector = parentSelector.split(splitF)[1];
function getP(el) {
// 获取当前元素的父元素
var p = el.parentNode;
// 如果元素的父元素是document 那么证明已经到最后一层了 就是没有匹配到这个父元素
if (p === document) {
return false;
}
// 如果父元素的id或者class包含样式类
if (p[type].indexOf(selector) > -1) {
// 如果包含 那么返回这个元素
return p;
} else {
// 如果不包含那么就递归 这里要return递归函数 否则会没有返回值
return getP(p);
}
}
var final = getP(el);
return final;
}
getParents(document.getElementById('ResTableList'), '#main');
getParents(document.getElementById('ResTableList'), '.main');
如果他的某一个父元素中含有要查找的元素,则返回,没有则返回false