javascript 使用选择器获取最近的父元素(不包括当前元素)

disbfnqx  于 2023-05-16  发布在  Java
关注(0)|答案(2)|浏览(162)

我正在尝试获取元素的最接近的父元素。
看一下.closest(),如果选择器与它匹配,它似乎会返回元素本身:
closest()方法遍历Element及其父节点(指向文档根),直到找到与提供的选择器字符串匹配的节点。将返回自身或匹配的祖先。如果不存在这样的元素,则返回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本身,而不是它与选择器div(level1)匹配的最近父对象,这正是我所需要的。
我知道在这种情况下,我可以简单地执行closestParent.parentElement,但这只是一个例子,我试图弄清楚是否有可能避免.closest()返回元素本身。

kmb7vmvb

kmb7vmvb1#

要排除当前元素,请获取相对于其parentNodeclosest()

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

rxztt3cl2#

Document of Closest这是一个DOM,它不是关于父元素,而是关于最近的元素,所以你可以像下面这样改变你的查询,但是如果你需要父元素,只需要使用parentEelement

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

相关问题