如何从li元素访问最远父元素并添加addClass？替代多次parent()方法

嘿，完全懂你的痛点——连续敲六次parent()不仅写着麻烦，哪天DOM结构改了（比如多嵌套一层或者少一层），这段代码直接就崩了，维护起来太糟心！

其实jQuery里早就有更优雅的方法来处理这种找祖先元素的需求，不用硬堆parent()。分两种场景给你说：

场景1：找匹配特定选择器的最远祖先 #

比如你要从目标li出发，找到最外层的<ul>（或者某个特定类名的父容器），这时候用parents()配合last()就完美解决：

// 假设目标li是$('.target-li')
$('.target-li').parents('ul').last().addClass('your-target-class');

parents('ul')会返回这个li所有的<ul>祖先（从直接父元素开始往上找），last()则取其中最顶层的那个——不管嵌套多少层，都能精准定位，而且DOM结构变动时只要选择器没错，代码不用改。

场景2：找整个DOM树的最顶层父元素（比如<html>） #

如果你的需求是直接找到最根级的父元素，那用closest()反而更直接：

$('.target-li').closest('html').addClass('your-class');

不过这种场景比较少见，一般我们都是找特定类型的祖先容器。

对比你原来的写法 #

原来的$('li').parent().parent().parent().parent().parent().parent().addClass(...)，换成上面的写法后，不仅代码更简洁，可读性和可维护性都提升了不止一个档次。

举个实际DOM结构的例子：

<div class="container">
  <ul class="outer-list">
    <li>
      <ul class="middle-list">
        <li>
          <ul class="inner-list">
            <li class="my-li">我是目标li</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

如果要给最外层的.outer-list加类，用$('.my-li').parents('ul').last().addClass('active')就搞定，不用管中间嵌套了几层。

另外再提一句closest()和parents()的区别：closest()是从当前元素开始往上找，返回第一个匹配的祖先；而parents()是返回所有匹配的祖先（顺序是从近到远），所以用last()就能拿到最远的那个。

内容的提问来源于stack exchange，提问作者Jack The Baker