jQuery - 既知の子クラス：親の親の次の子孫を見つける（親IDから）

Question

私はこれまでに何の解決策もなしにこれをたくさん探してきました。あなたが見たこともあるかもしれないが、トピックのタイトルは解釈が少し難しいかもしれませんが、それは私がまもなくそれを説明する方法がかなり分かっていないためです。

問題以下のHTMLを見ると
は、私が「アクティブ」と呼ばれる最後の要素のクラスを知っていて、この要素は、訪問者が現在にあるサイトをもとに、jQueryので動的に選択されている - すなわち、異なる要素このクラスはサイトによって異なります。別のサイトでliのクラスがfirst-sub-liの場合、クラスactive（またはその場合はliのクラスfirst）を持つことができます。このクラスは、jqueryを使用してサイトに基づいて動的に追加されます。ここからは、要素の親をtop-parentという直接の子孫であるactiveで識別し、active-parentというクラスを追加したいと考えています。私。以下の場合、クラスをクラスsecondのliに追加したいと考えています。

編集：リストの「奥行き」は異なる可能性があります。したがって、親を選択するための「動的な」アプローチも必要です。私は最初の執筆でこれを完全に忘れてしまった。

<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をsuccesなしで試しました。
EDIT 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

あなたは、それが自己li除くう.parent()でアップ横断を開始することができました。

$(".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>