jQuery/CSS - 需要幫助選擇

Question

帶有如下標記：

<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 來做到這一點？

Answer 1

使用 ":has" 操作符，你可以讓這變得更簡單。 該行抓取任何包含帶有活動鏈接的“li”的“li”元素。

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

Answer 2

假設頂級 ul 的 id 為 yourUl 的一種方法：

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

Answer 3

在一般情況下這樣做有點棘手，因為它高度依賴於標記，但看起來您想要的是更改錨的類，其下一個兄弟姐妹中的任何一個都包含具有活動類的錨。 以下應該可以解決問題，稍微優化一下，它將跳過任何已經如此標記的錨點。 它使用nextAll()方法和:not和:has選擇器。

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

如果您需要將初始錨限制到某個級別，只需更改初始選擇器，使其特定於您需要的級別。 最簡單的方法是基於特定元素$('#myList > a:not(.active)')或特定類$('a.topLevel:not(.active)') 。

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');
});