如何在JavaScript中从任意层级列表项访问顶级列表项元素

你的代码只向上查找了一层父级<ul>就停止遍历，所以无法定位到最顶层的Level 1列表项。要解决这个问题，我们需要循环向上遍历DOM树，直到找到最上层的列表项为止。

实现思路 #

• 从当前选中的列表项出发，作为遍历的起点
• 每次循环中，先找到当前列表项的父级<ul>（带list类）
• 再获取该<ul>的父元素（即上一级的list-item）
• 重复上述步骤，直到找不到更上层的list-item，此时的元素就是顶级列表项

完整代码示例 #

HTML结构

<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代码

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

function getTopLevelListItem(currentItem) {
  let topItem = currentItem;
  while (true) {
    const parentUl = topItem.parentNode;
    // 检查父级是否是目标ul
    if (!parentUl || !parentUl.classList.contains('list')) break;
    
    const parentItem = parentUl.parentNode;
    // 检查ul的父元素是否是上层列表项
    if (!parentItem || !parentItem.classList.contains('list-item')) break;
    
    // 更新遍历目标为上层列表项
    topItem = parentItem;
  }
  return topItem;
}

const levelOneListItem = getTopLevelListItem(currentListItem);

// 点击测试输出
currentListItem.addEventListener("click", () => {
  console.log("顶级列表项:", levelOneListItem);
});

这段代码可以适配任意层级的嵌套列表，无论当前列表项处于第几层，都能准确找到最顶层的列表项。

内容的提问来源于stack exchange，提问作者FD3