Javascript 如何使用jQuery为一个同级元素的所有父元素添加类

我有这个标记：

<li class="parent">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

并解决以下需求：

点击第一个按钮后

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

山上的情况非常恶劣-需要帮助的话太多了。

你想要的是

.parent（）

（直接家长）或

.parents（）

（遍历所有家长）而不是

.prevAll

.next*

和

.prev*

用于兄弟姐妹

从那里，您可以调整选择器以过滤/缩小搜索范围，或更改要遍历的父节点的数量，例如

$（this）。父节点（'.parent'）

匹配所有应用了类

父节点的父节点

若要将其可视化，请执行以下操作：

$('span').click(function(){
  $(this)./*one of the below methods*/;
});

查看如果取消
$（this）
，每个方法将如何反应：

.parent（）.parents（）.parents（'foo'）.parents（'bar'））
x
x x
x x x x
目标

x
意味着它将在结果中返回。
在
中单击按钮的处理程序，只需使用
$（this）.parents（.parent”）.addClass（“some_class”）但在此之后，我将为所有li父级创建类，我只需要为主父级元素添加它。Dude，你的意思是说你只想为第一个父级应用类，单击任何按钮，如果“是”，那么这应该是你的解决方案$（'span.button'）。on（'click'，function（）{$（'li.parent:first'）。addClass（'some_class'）；}）@山姆：你的选择器对范围是不可知的。这将匹配页面上的第一个
.parent
，无论单击了哪个
.button
。不是第一个，而是所有
<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent some_class">
      <span class="button"></span>
      <li class="parent some_class">
         <span class="button"></span>
      </li>
   <li>
<li>

<li class="parent some_class">
   <span class="button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>    
<li class="parent some_class">
   <span class="this_button"></span>
   <li class="parent">
      <span class="button"></span>
      <li class="parent">
         <span class="button"></span>
      </li>
   <li>
<li>

$('span').click(function(){
  $(this)./*one of the below methods*/;
});

                            .parent() .parents() .parents('foo') .parents('bar')
<div>                                  x
  <div class="foo">                    x          x
    <div class="foo bar">    x         x          x               x
      <span>target</span>
    </div>
  </div>
</div>