原生JS实现closest方法

Html

Css


    
        .list
        
                    .text
                
    
    .list
    .list
    .list
    .list
    .list
    .list
    .list


 不是.text的父级元素



    
        isSelf:
        
    
    
        isNotParents:
        
    
    
        isParent:

html {
	font-size:16px;
}
body,ul {
	margin:0
}
ul {
	padding-left:0;
	list-style:none;
	display:flex;
}
li {
	flex:1;
	text-align:center;
	line-height:40px;
}
.layer .list {
	background-color:cornsilk;
}
.list .text {
	display:inline-block;
	margin-left:10px;
	background-color:#eee;
}
.defined-area {
	margin-top:20px;
	background-color:dodgerblue;
	color:#fff;
	font-size:18px;
	text-align:center;
	line-height:40px;
}
.constract {
	margin-top:20px;
}
.constract .judge {
	background-color:#ffb340;
}
.judge > span {
	color:#fff;
	font-weight:700;
}

Element.prototype.closestReplenish = function(tar) {

var ele = this;

var elArr = (function() {

if (tar instanceof HTMLElement) return [tar];

try {
            tar = document.querySelectorAll(tar);
        } catch (e) {

} finally {
            var type = Object.prototype.toString.call(tar).slice(8, -1);
            if (['NodeList', 'HTMLCollection', 'Array'].indexOf(type) > -1) return [].slice.call(tar);
        }

})();

do {

if (elArr.indexOf(ele) > -1) return ele;

ele = ele.parentElement;

} while (ele !== null);

return null;

}

const layer = document.querySelector('.layer'),
    listNL = layer.querySelectorAll('.list'), //NodeList
    listHC = layer.children, //HTMLCollection
    listA = Array.from(layer.children), //Array
    text = listHC[0].querySelector('.text'),
    definedArea = document.querySelector('.defined-area');

//verify

let resultC = text.closest('.list'), //查找最近一级的.list父元素
    resultC2 = text.closest('.text'), //查找元素本身
    resultC3 = text.closest('.defined-area'); //查找非父级元素defineArea

let resultCR = text.closestReplenish(listNL[0]), //HTMLElement
    resultCR1 = text.closestReplenish('.list'), //css选择器
    resultCR2 = text.closestReplenish(listNL), //NodeList
    resultCR3 = text.closestReplenish(listHC), //HTMLCollection
    resultCR4 = text.closestReplenish(listA), //Array
    resultCR6 = text.closestReplenish(text), //查找元素本身
    resultCR7 = text.closestReplenish(definedArea); //查找非父级元素defineArea

//judge

let isSelf = resultC2 === resultCR6,
    isNotParents = resultC3 === resultCR7,
    isParent = [resultCR, resultCR1, resultCR2, resultCR3, resultCR4].every(e => e === resultC);

let judgesCon = document.querySelectorAll('.judge > span');
[isSelf, isNotParents, isParent].forEach((e, i) => {
    judgesCon[i].textContent = e;
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生JS实现closest方法



代码描述：一个查找指定父元素的方法closest

更新时间：2020-06-01 00:13:48
说明：
1、element.prototype.closest本为浏览器自带方法，用于向上遍历（查找）最近的祖先元素。使用：
、若查询到了，返回查到的祖先元素（包括元素本身）；
、否则返回null
缺点：但不兼容ie，且其匹配模式（参数）仅支持css选择器，如：".list'、'#id'、':not(#id)'等；
2、element.prototype.closestreplenish为自定方法，replenish意'补足'，即对closest的完善。补足点：
、兼容ie9及以上；
、其匹配模式除了支持css选择器，还包括htmlelement、nodelist、htmlcollection、array（内为htmlelement）四类，使用更灵活、方便。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

果，又是甲嘛底讷

相关代码

原生JS实现closest方法

最新