本文介绍使用 Element.closest() 配合精确 CSS 选择器，高效定位任意深度嵌套列表中对应顶层 <li class="list-item"> 的方法，无需递归遍历，代码简洁且兼容现代浏览器。
本文介绍使用 `element.closest()` 配合精确 css 选择器，高效定位任意深度嵌套列表中对应顶层 `
在处理多层嵌套的无序列表（如树形菜单、目录结构或动态折叠面板）时，常需从任意子级 <li> 快速回溯到其最外层的“根级”列表项（即直接位于顶级 <ul class="list"> 下的 <li class="list-item">）。传统循环向上查找 parentNode 容易出错——例如原方案中误将 <ul> 当作目标元素，且未正确终止条件，导致逻辑失效。
推荐解法是利用现代 DOM API 中的 Element.closest() 方法，它从当前元素开始，沿祖先链向上查找第一个匹配指定 CSS 选择器的元素，语义清晰、性能优异、代码简短。
关键在于构造精准的选择器：
*:not(.list-item) > .list > .list-item
该选择器含义为：
- *:not(.list-item) —— 祖先中非 .list-item 类的任意元素（即排除中间层级的 <li>）；
- > .list —— 其直接子元素必须是 .list（即嵌套的 <ul>）；
- > .list-item —— 该 <ul> 的直接子元素必须是 .list-item（即目标顶层 <li>）。
综合起来，它唯一匹配「祖父节点不是 .list-item，父节点是 .list，自身是 .list-item」的元素——这恰好定义了所有顶层 <li> 的结构特征。
✅ 正确实现示例：
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 嵌套模式，避免意外干扰选择器匹配；
- 若顶层 <li> 可能存在多个（如并列多个一级菜单项），此方法仍准确返回当前路径上最近的一个顶层项，符合预期；
- 可封装为复用函数提升可维护性：
function getTopLevelListItem(el) { return el?.closest('*:not(.list-item) > .list > .list-item'); }
通过合理运用 closest() 与语义化选择器，我们以声明式方式优雅解决了动态嵌套结构中的祖先定位问题——既避免了手动遍历的复杂性，又保证了代码的健壮性与可读性。
