如何在JAVASCRIPT中访问任意级别列表项元素的顶级列表项元素

<ul class="list">
  <li class="list-item">Level 1
    <ul class="list">
      <li class="list-item">Level 2
        <ul class="list">
          <li class="list-item">Level 3
            <ul class="list">
              <li class="list-item is-selected">Level 4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

const currentListItem = document.querySelector('.list-item.is-selected');

const parentUlElement = currentListItem.parentNode;


while (parentUlElement && !parentUlElement.classList.contains('list')) {
  parentUlElement = parentUlElement.parentNode;
}

// This will select the `<li class="list-item">Level 1` element.
const levelOneListItem = parentUlElement;

const currentListItem = document.querySelector('.list-item.is-selected');

const parentUlElement = currentListItem.parentNode;

while (parentUlElement && !parentUlElement.classList.contains('list')) {
  parentUlElement = parentUlElement.parentNode;
}

const levelOneListItem = parentUlElement;
  currentListItem.addEventListener("click", () => {
   console.log("levelOneListItem", levelOneListItem);
});

<ul class="list">
  <li class="list-item">Level 1
    <ul class="list">
      <li class="list-item">Level 2
        <ul class="list">
          <li class="list-item">Level 3
            <ul class="list">
              <li class="list-item is-selected">Level 4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

 *:not(.list-item) > .list > .list-item

const currentListItem = document.querySelector('.list-item.is-selected');

const levelOneListItem = currentListItem.closest("*:not(.list-item) > .list > .list-item");

console.log("levelOneListItem", levelOneListItem);

<ul class="list">
  <li class="list-item">Level 1
    <ul class="list">
      <li class="list-item">Level 2
        <ul class="list">
          <li class="list-item">Level 3
            <ul class="list">
              <li class="list-item is-selected">Level 4</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Javascript相关问答推荐

带对角线分隔符的图像滑动器

React redux状态未在React-Router库中呈现

如何指定1条记录1个表？

在分区内迭代分区

成帧器运动中的运动组件为何以收件箱开始？

如何解决CORS政策的问题

点击按钮一次有文本出现和褪色，而不是点击两次？(html，CSS，JavaScript)

在grafana情节，避免冲突的情节和传说

更改JSON中使用AJAX返回的图像的路径

从Node JS将对象数组中的数据插入Postgres表

无法检测卡片重叠状态的问题

在浏览器中触发插入事件时检索编码值的能力

有条件重定向到移动子域

面对代码中的错误作为前端与后端的集成

为什么我的按钮没有从&q；1更改为&q；X&q；？

按什么顺序接收`storage`事件？

每次重新呈现时调用useState initialValue函数

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

处理TypeScrip Vue组件未初始化的react 对象

我正在试着做一个TicTacToe Ai来和我玩.但是，我试着在第一个方块被点击时出现一个X，然后在第二个方块之后出现一个O