如何获取嵌套列表父级元素

核心思路是：顶层

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

✅ 含义解析：

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

该选择器能跳过所有中间层级，一步命中结构上真正的“第一级”列表项。

✅ 正确实现代码

const currentListItem = document.querySelector('.list-item.is-selected');
const topListItem = currentListItem.closest('*:not(.list-item) > .list > .list-item');

if (topListItem) {
  console.log('顶层列表项:', topListItem);
  console.log('文本内容:', topListItem.textContent.trim()); // 输出 "Level 1"
} else {
  console.warn('未找到顶层 list-item');
}

⚠️ 注意事项

• 兼容性：closest() 支持现代浏览器（Chrome 41+, Firefox 35+, Edge 15+, Safari 10+）；若需兼容 IE，需引入 polyfill 或改用 parentNode 循环（推荐封装为工具函数）；
• 选择器鲁棒性：确保 .list 和 .list-item 类名在项目中具有唯一结构性语义，避免因样式类复用导致误匹配；
• 动态内容场景：若列表由 JS 动态渲染，需确保执行 closest() 前 DOM 已就绪（如置于 DOMContentLoaded 或组件 mounted 钩子中）；
• 性能优势：相比手动遍历，closest() 由浏览器原生优化，时间复杂度更优，且代码更易读、可维护。

✅ 扩展：通用工具函数（支持任意层级）

function getTopLevelListItem(el) {
  if (!(el instanceof Element) || !el.classList.contains('list-item')) return null;
  return el.closest('*:not(.list-item) > .list > .list-item');
}

// 使用示例
document.querySelectorAll('.list-item').forEach(item => {
  item.addEventListener('click', () => {
    const top = getTopLevelListItem(item);
    console.log(`点击 ${item.textContent.trim()} → 顶层项:`, top?.textContent.trim());
  });
});

此方法彻底摆脱对嵌套深度的假设，以声明式方式表达结构意图，是处理动态嵌套 DOM 的最佳实践之一。

今天关于《如何获取嵌套列表父级元素》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！