父母与子女

Question

我有两个级别列表

<ul>
   <li></li>
   <li></li>
   <li>
      <ol>
         <li></li>
         <li class="active"></li>
         <li></li>
      </ol>
   </li>
   <li></li>
   <li></li>
</ul>

我如何使用内部LI活动类将新类添加到父LI中，如

 <ul>
      <li class="parent">
         <ol>
           <li class="active">

Answer 1

您的回答

您应该使用：

$('.active').parents('li:first').addClass('parent');

如果您想获得第一位家长或：

$('.active').parents('li').addClass('parent');

如果你想要所有的父母。

为什么不使用最近的

jQuery具有closest()方法。通常，这是我们应该使用的内容，但在这种情况下，.closest('li')将自行返回，因为它包含支票中的当前元素。

但是，正如A.Wolff指出的那样，你可以在选择器中使用:not()来排除活动的，就像那样：

$('.active').closest('li:not(.active)').addClass('parent');

更多解决方案

• T.J. Crowder在他的answer中还有其他可行的解决方案;

Answer 2

你有几个选择，但我认为：

$('.active').parents('li:first').addClass('parent');

$('.active').parents('li').first().addClass('parent');

......可能最简单，最清晰，

$('.active').parent().closest('li').addClass('parent');

......排在第二位。

你不能直接进入closest因为closest从你正在看的元素开始，所以会自行返回。

示例：

$("li.active").parents("li").first().addClass("parent");

.active {
  color: red;
}
.parent {
  color: green;
}

<ul>
   <li>a</li>
   <li>b</li>
   <li>
      <ol>
         <li>c</li>
         <li class="active">d</li>
         <li>e</li>
      </ol>
   </li>
   <li>f</li>
   <li>g</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

我认为这会奏效。

$('.active').parent().parent().addClass('parent');

Answer 4

我认为下面给出的代码是最好的解决方案，因为nearest（）将在dom中向上移动，直到找到匹配，而parent（）将向上移动到文档的根目录，这将是昂贵的。

$（＆＃39;。主动＆＃39）接近的（＆＃39;李：否（。主动）＆＃39）。addClass（＆＃39;父＆＃39）;