时间戳

首页 > 解决方案 > 多次使用 parentElement

javascript - 多次使用 parentElement

问题描述

我正在编辑一个在像excel（下拉）这样的表格上创建过滤器的插件，问题是当我在一个使用它里面的表格的表格上使用它时，实际上该插件也会采用子表。
因此，我决定从由所有行组成的初始数组中排除那些具有父级且表没有 id 的元素。
所以我forEach排列，看看是否有id：

this.tds.forEach((el) =>{
   console.log(el.parentElement.parentElement.parentElement.id); 
});

我想知道这样使用parentElement三遍是正确的还是有其他方法

标签： javascript

解决方案

完全没问题，只要您确定结构始终相同。

但是让我们假设你不知道结构是否总是这样，但你知道class你正在寻找的父级（或任何其他 CSS 查询），那么你可以使用该Element.closest()方法查询你的方式.

因此，假设您想找到最近的具有 id 值的表。

this.tds.forEach((el) => {
  const parent = el.closest('table:not([id=""])');
  if (parent !== null) {
    console.log(parent.id); 
  }
});

这将从elas 起点沿着 DOM 树向上走，做一些类似的事情，直到它到达一个在属性parentElement.parentElement.parentElement...中具有值的元素。id

推荐阅读