查找具有特定类的最接近的祖先元素

2020/10/11 04:01 · javascript ·  · 0评论

在纯JavaScript中,如何找到最接近具有特定类的树的元素祖先例如,在像这样的树中:

<div class="far ancestor">
    <div class="near ancestor">
        <p>Where am I?</p>
    </div>
</div>

然后,我想div.near.ancestor在上尝试p并搜索ancestor

更新:大多数主流浏览器现在都支持

document.querySelector("p").closest(".near.ancestor")

请注意,这可以匹配选择器,而不仅仅是类

https://developer.mozilla.org/zh-CN/docs/Web/API/Element.closest


对于不支持closest()但拥有matches()一个的旧版浏览器,可以构建类似于@rvighne的类匹配的选择器匹配:

function findAncestor (el, sel) {
    while ((el = el.parentElement) && !((el.matches || el.matchesSelector).call(el,sel)));
    return el;
}

这可以解决问题:

function findAncestor (el, cls) {
    while ((el = el.parentElement) && !el.classList.contains(cls));
    return el;
}

while循环一直等到el拥有所需的类,并且每次迭代都将其设置elel的父类,因此最后,您的祖先就是该类或null

如果有人想改进它,这是一个小提琴它不能在旧版浏览器(即IE)上运行;有关classList的信息,请参见此兼容性表parentElement之所以在此处使用,是因为parentNode会涉及更多工作以确保节点是元素。

使用element.closest()

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/closest

请参阅以下示例DOM:

<article>
  <div id="div-01">Here is div-01
    <div id="div-02">Here is div-02
      <div id="div-03">Here is div-03</div>
    </div>
  </div>
</article>

这是使用element.closest的方式:

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here is div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here is div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here is the outmost article

基于the8472答案https://developer.mozilla.org/en-US/docs/Web/API/Element/matches,这里是跨平台2017解决方案:

if (!Element.prototype.matches) {
    Element.prototype.matches =
        Element.prototype.matchesSelector ||
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.oMatchesSelector ||
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;
        };
}

function findAncestor(el, sel) {
    if (typeof el.closest === 'function') {
        return el.closest(sel) || null;
    }
    while (el) {
        if (el.matches(sel)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}

@rvighne解决方案效果很好,但正如注释中所指出的ParentElementClassList两者都存在兼容性问题。为了使其更加兼容,我使用了:

function findAncestor (el, cls) {
    while ((el = el.parentNode) && el.className.indexOf(cls) < 0);
    return el;
}
  • parentNode属性而不是parentElement属性
  • indexOf方法的className属性而不是contains在方法classList属性。

当然,indexOf只是在寻找该字符串的存在,它不在乎是否是整个字符串。因此,如果您有另一个具有类'ancestor-type'的元素,它仍然会以找到'ancestor'的形式返回,如果这对您来说是个问题,也许您可​​以使用regexp来查找完全匹配。

此解决方案应适用于IE9及更高版本。

当您需要获取一个父容器时,它就像jQuery的parents()方法,该容器可能比给定元素高出几个级别,例如查找包含<form>clicked的容器<button>浏览父项,直到找到匹配的选择器或到达<body>返回匹配的元素或<body>

function parents(el, selector){
    var parent_container = el;
    do {
        parent_container = parent_container.parentNode;
    }
    while( !parent_container.matches(selector) && parent_container !== document.body );

    return parent_container;
}
本文地址:http://javascript.askforanswer.com/chazhaojuyoutedingleidezuijiejindezuxianyuansu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!