javascript - jQuery - 已知子类 : find next descendent of parent in top (from parent ID)

Question

我一直在寻找这个问题，但到目前为止还没有任何解决方案。正如您可能也看到的，主题标题可能有点难以解释，那是因为我不太确定如何快速解释它。

问题
看看下面的 HTML，我知道最后一个元素的类称为“active”，并且该元素是在 jQuery 中根据访问者当前所在的站点动态选择的 - 即，不同的元素根据站点具有此类。在另一个网站上 li与类first-sub-li可以有类(class)active (或者就此而言 li 与类 first )。如前所述，这个类是使用 jquery 根据站点动态添加的。从这里开始，我希望用 active 标识该元素的父元素。它是 top-parent 的直系后代并添加一个名为 active-parent 的类对此。 IE。在下面的情况下，我希望添加 active-parent类到 li与类second 。

编辑:请注意，列表的“深度”可能会有所不同，因此还需要采用“动态”方法来挑选父级。我在最初的写作中完全忘记了这一点。

<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>           <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>

到目前为止，我已经尝试了以下 jQuery，但没有成功，因为它无法识别它。
编辑2:这实际上确实工作，但最初它不起作用，因为它显然是在类加载之前调用的，尽管后来出现在javascript文档中。将其包裹在 $(window).on("load", function() 中解决问题如下所示。

$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});

原来的代码只是$(".active").closest("#top-parent > li").addClass("active-parent");

Answer 1

您可以使用 .parent() 开始向上遍历，它将排除 self li。

$(".active").parent().closest("li").addClass("active-parent");

<小时/>

您可以使用:has() selector

$('#top-parent > li:has(.active)').addClass("active-parent");

$('#top-parent > li:has(.active)').addClass("active-parent");

.active-parent {
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
  <li class="first">
    <ul class="first-sub-ul">
      <li class="first-sub-li"></li>
    </ul>
  </li>
  <li class="second">
    <ul class="second-sub-ul">
      <li class="second-sub-li">
        <ul class="second-sub-sub-ul">
          <li class="second-sub-sub-li active"></li>
          <!-- Here -->
        </ul>
      </li>
    </ul>
  </li>
</ul>