Question

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

问题
查看下面的HTML，我知道最后一个元素的类叫做＃34; active＆＃34;并且这个元素是在jQuery中根据访问者当前所在的站点动态选择的 - 即根据站点不同的元素具有此类。在另一个网站上，li课程first-sub-li可以包含课程active（或者类似li课程first）。如上所述，这个类是基于jquery的站点动态添加的。从这里开始，我希望识别元素的父元素active，它是top-parent的直接后代，并为此添加一个名为active-parent的类。即在下面的情况中，我希望将active-parent课程添加到li课程second。

编辑：请注意＆＃34;深度＆＃34;列表的内容可能会有所不同，因此也需要动态的＆＃34;挑选父母的方法。我在最初的写作中完全忘记了这一点。

<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()开始遍历，它将排除自我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>

Answer 2

我认为这就是你要找的东西。找到li的直接后代的所有topmost-parent，并对具有子.active的那个进行过滤。申请上课。

$('#top-parent > li').filter(function(e){
   return $(this).find('.active').length>0;
}).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">1.1</li>
    </ul>
  </li>
  <li class="second">
    <ul class="second-sub-ul">
      <li class="second-sub-li active">2.1</li>           <!-- Here -->
    </ul>
  </li>
</ul>

jQuery - 已知的子类：在top中查找父级的下一个后代（来自父ID）

2 个答案: