无需jQuery：优化JavaScript嵌套调用closest方法的更佳方案

嘿，这个问题提得很到位！确实连续链式调用三次closest显得有点冗余，咱们可以用几种更优雅的方式来实现相同的效果，同时兼顾可读性和稳定性：

方式一：利用已知DOM结构简化调用 #

如果你的DOM结构是固定的（比如内层ul的父元素必然是li），那可以直接用parentElement替代一次closest('li')，减少方法调用次数：

item.closest('ul').parentElement.closest('ul').classList.add('active');

这种写法最简洁，性能也略好，但前提是你能确保内层ul的直接父元素就是li，如果DOM结构后续有变动，可能会出问题。

方式二：封装自定义序列查找函数 #

如果需要更灵活、可读性更强的实现，或者以后可能调整查找序列，可以封装一个小函数来处理多层祖先查找：

function findAncestorSequence(el, selectorSequence) {
  let currentElement = el;
  for (const selector of selectorSequence) {
    currentElement = currentElement.closest(selector);
    // 如果中途找不到匹配元素，提前返回null避免报错
    if (!currentElement) return null;
  }
  return currentElement;
}

// 使用示例
findAncestorSequence(item, ['ul', 'li', 'ul'])?.classList.add('active');

这种方式把查找逻辑封装起来，后续修改序列只需要调整数组里的选择器就行，代码也更清晰，还能自动处理找不到元素的情况（可选链操作符?.避免报错）。

方式三：使用复合CSS选择器（需注意兼容性） #

如果你的目标浏览器支持CSS伪类:has（现代浏览器基本都支持，IE除外），还可以用更精准的复合选择器直接定位目标元素：

item.closest('ul:has(> li > ul)').classList.add('active');

不过这种写法依赖你对DOM结构的精准描述，需要确保选择器能唯一匹配到你要的外层ul。

总的来说，方式一适合结构稳定的场景，方式二更通用灵活，你可以根据自己的项目需求来选~

内容的提问来源于stack exchange，提问作者Jens Törnell