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

jQuery / CSS - 在选择方面需要帮助

4 个答案: