jQueryの/ CSS - のようなマークアップと選択

Question

における必要性のヘルプ：iが「アクティブ」クラスを追加したい

<ul> 
    <li><a href="#">Link 1</a></li> 
    <li> 
     <a href="#">Link 2</a> 
     <ul> 
      <li><a href="#" class="active">Link 2.1</a></li> 
      <li><a href="#">Link 2.2</a></li> 
     </ul> 
    </li> 
</ul> 

、リンク2（4行目）、または内部a.activeリンクを持つリンク。 jqueryや純粋なCSSでもどうすればいいですか？

$('#yourUl>li>a').filter(function(){ 
    return $(this).find('a.active').length; 
}).addClass('active'); 

Answer 1

"：has"演算子を使用すると、これをもっと簡単にすることができます。この行は、アクティブリンクを持つ "li"を含む "li"要素を取得します。

$('li:has(li>a.active)').addClass('active'); 

Answer 2

一つの方法次の兄弟にクラスアクティブのアンカーが含まれているアンカーのクラスを変更します。以下の手順では、既にマークされているアンカーをスキップするような小さな最適化を行う必要があります。それはnextAll()メソッドと:notと:hasセレクタを使用します。

$('a:not(.active)').nextAll(':has(a.active)') 
        .addClass('active'); 

あなたが特定のレベルに制限された最初のアンカーが必要な場合、それはあなたが必要とするレベルに固有であるように、ちょうど最初のセレクタを変更します。最も簡単な方法は、特定の要素$('#myList > a:not(.active)')または特定のクラス$('a.topLevel:not(.active)')を基にすることです。

Answer 3

、それは非常にマークアップに依存するので、これは一般的なケースでこれを行うには少しトリッキーだが、それはあなたが欲しいもののようになります。トップレベルULがyourUlのIDを持っていると仮定すると

Answer 4

//adds active to second anchor 
$('ul>li>a:eq(2)').addClass('active'); 

//adds active to anything with an active link as a descendant 
$('ul>li>a').each(function(i) { 
    if($('a.active', this).length > 0) 
     $(this).addClass('active'); 
});