我怎样才能找到一个元素的祖先,它最接近于有一个特定类in pure JavaScript的树?例如,在这样一棵树上:

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

如果我试着在p上搜索ancestor,我想要div.near.ancestor.

推荐答案

更新:现在支持in most major browsers

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

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

https://developer.mozilla.org/en-US/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;
}

Javascript相关问答推荐

有人可以用这个 javascript 正则表达式帮助我将一串列表项转换为仅包含项目文本的数组(没有列表项 # 或换行)

将多个查询返回格式化为 JSON 对象

相对定位的

防止绝对定位的元素在没有明显重叠的情况下显示

如何链接父子css变换变量

SolidJS 中的条件样式

如何将 Rsa 密钥对(字符串)转换为加密密钥以对数据进行签名

React,无法访问在 useEffect() 中传递给 setInterval() 的函数内状态变量的更新值

在提交表单之前询问用户

react js中的搜索过滤器

将元素添加到 const 集

锚标记点击以区分相同的 onClick Javascript 函数

如何将下拉菜单与按钮对齐

如何解决这个错误“Uncaught TypeError: inputArgs[0].match is not a function”

Google OAuth2 出现问题(应用没有后端,因此只有客户端)

TSX 文件无法呈现导入的 React 组件

使用 jquery-confirm 确认框停止回发,似乎无法获得返回值(webform 项目)

如何在 React.js 中处理未知数量的状态变量?

构建自定义选项卡组件时无法在渲染函数中使用 TransitionGroup

在 Javascript 中,(动态)导入的 ES6-Module 实例的类型/类是什么?

Google Sheet App Script:将 1 个值从一张表匹配到另一张表,然后如果条件满足设置背景