本文介绍使用 Element.closest() 配合精确 CSS 选择器，高效定位任意深度嵌套列表中对应顶层 的方法，无需递归遍历，代码简洁且兼容现代浏览器。

本文介绍使用 `element.closest()` 配合精确 css 选择器，高效定位任意深度嵌套列表中对应顶层 `

` 的方法，无需递归遍历，代码简洁且兼容现代浏览器。

在处理多层嵌套的无序列表（如树形菜单、目录结构或动态折叠面板）时，常需从任意子级

快速回溯到其最外层的“根级”列表项（即直接位于顶级

下的
• ）。传统循环向上查找 parentNode 容易出错——例如原方案中误将
  当作目标元素，且未正确终止条件，导致逻辑失效。

  推荐解法是利用现代 DOM API 中的 Element.closest() 方法，它从当前元素开始，沿祖先链向上查找第一个匹配指定 CSS 选择器的元素，语义清晰、性能优异、代码简短。

  关键在于构造精准的选择器：

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

  该选择器含义为：

  • *:not(.list-item) —— 祖先中非 .list-item 类的任意元素（即排除中间层级的
  • ）；
  • > .list —— 其直接子元素必须是 .list（即嵌套的
    ）；
  • > .list-item —— 该
    的直接子元素必须是 .list-item（即目标顶层
    • ）。

    综合起来，它唯一匹配「祖父节点不是 .list-item，父节点是 .list，自身是 .list-item」的元素——这恰好定义了所有顶层

  • 的结构特征。

    ✅ 正确实现示例：

    const currentListItem = document.querySelector('.list-item.is-selected');
    const topListItem = currentListItem.closest('*:not(.list-item) > .list > .list-item');
    
    if (topListItem) {
      console.log('Top-level list item:', topListItem);
      console.log('Text content:', topListItem.textContent.trim()); // 输出 "Level 1"
    } else {
      console.warn('No top-level list item found.');
    }

    ? 注意事项与最佳实践：

    • closest() 在 IE 中不支持，如需兼容旧版浏览器，请添加 polyfill 或改用 while 循环 + node.parentNode 手动遍历（需修正原逻辑：应检查 parentElement 而非 parentNode，并判断 parentElement.classList.contains('list') && parentElement.parentElement && !parentElement.parentElement.classList.contains('list-item')）；
    • 确保 HTML 结构严格遵循 .list > .list-item 嵌套模式，避免意外干扰选择器匹配；
    • 若顶层
    • 可能存在多个（如并列多个一级菜单项），此方法仍准确返回当前路径上最近的一个顶层项，符合预期；
    • 可封装为复用函数提升可维护性：

      function getTopLevelListItem(el) {
        return el?.closest('*:not(.list-item) > .list > .list-item');
      }

    通过合理运用 closest() 与语义化选择器，我们以声明式方式优雅解决了动态嵌套结构中的祖先定位问题——既避免了手动遍历的复杂性，又保证了代码的健壮性与可读性。