时间戳

首页 > 解决方案 > 使用选择器获取最近的父元素（不包括当前元素）

javascript - 使用选择器获取最近的父元素（不包括当前元素）

问题描述

我正在尝试获取元素的最接近的父元素。

查看.closest()，如果选择器与之匹配，它似乎会返回元素本身：

最近的（）方法遍历元素及其父元素（朝向文档根），直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素，则返回 null。

（重点是我的）

那么，在给定选择器的情况下，获取元素最接近父级的最佳方法是什么？

例子

var el = document.getElementById('foo');
var closestParent = el.closest('div');
console.log(closestParent);
<div>root
  <div>level1
    <div id='foo'>level2</div>
  </div>
</div>

如您所见，el.closest('div');返回el自身，而不是与选择器 (level1) 匹配的最接近的父div级，这正是我所需要的。

我知道在这种情况下我可以简单地做closestParent.parentElement，但这只是一个例子，我试图弄清楚是否可以避免.closest()返回元素本身。

标签： javascripthtmlcss

解决方案

最接近的函数正在返回正确的元素。它正在寻找最近的 div，它恰好是它自己。

如果你有这样的结构：

<div>root
  <div>level1
    <span id='foo'>level2</span>
  </div>
</div>

然后，您将使用您的代码获得 level1 父级。

如果要排除当前元素，只需使用parentNode

var el = document.getElementById('foo');
var closestParent = el.parentNode.closest('div');
console.log(closestParent);

推荐阅读