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

Это немного сложно сделать в общем случае, так как это сильно зависит от разметки, но похоже, что вы хотите изменить класс якоря, любой из следующих братьев и сестер которого содержит якорь с активным классом. Следующее должно сделать трюк, с небольшой оптимизацией, что он пропустит любые якоря, которые уже так помечены. Он использует метод nextAll () и : не , а : имеет селекторы.

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

Если вам нужно ограничить начальный якорьдо определенного уровня, просто измените начальный селектор так, чтобы он соответствовал нужному уровню. Самый простой способ - создать его на основе определенного элемента $('#myList > a:not(.active)') или определенного класса $('a.topLevel:not(.active)').

Answer 3

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

Answer 4

В одном случае предполагается, что ul верхнего уровня имеет идентификатор yourUl:

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