Выделение активного пункта меню

Имеется следующий код меню:

 <ul class="second-nav">
        <li class="second-nav__item">
            <a href="/catalog/new/" class="second-nav__link">Новинки</a>
            <div class="second-nav__sub-menu">
                <ul class="second-nav__sub-list">
                    <li class="second-nav__item-sub-menu"><a href="/catalog/new_trousers/"
                            class="second-nav__sub-link">Брюки</a></li>
                    <li class="second-nav__item-sub-menu"><a href="/catalog/new_jumpers/"
                            class="second-nav__sub-link">Джемпера</a></li>
                    <li class="second-nav__item-sub-menu"><a href="/catalog/new_costumes/"
                            class="second-nav__sub-link">Костюмы</a></li>
                </ul>
            </div>
        </li>
        <li class="second-nav__item">
            <a href="/catalog/sale/" class="second-nav__link second-nav__link--active">Распродажа</a>
            <div class="second-nav__sub-menu">
                <ul class="second-nav__sub-list">
                    <li class="second-nav__item-sub-menu"><a href="/catalog/sale_blouses/"
                            class="second-nav__sub-link">Блузки</a></li>
                    <li class="second-nav__item-sub-menu"><a href="/catalog/sale_breeches/"
                            class="second-nav__sub-link">Бриджи</a></li>
                </ul>
            </div>
        </li>
    </ul>

Мне нужно чтобы при переходе, например по ссылке "Брюки" ссылка меню, в котором находится ссылка, по которой мы перешли (а данном случае "Новинки") оставался активным. При переходе, например по ссылке "Бриджи" активным должна оставаться соответственно ссылка "Распродажа".

Вот js код:

$(function () {
    let fullUrl = window.location.href;
    let urlContent = fullUrl.split('/')
    let shortUrl = '/catalog/' + urlContent[urlContent.length - 2] + '/';
    $('.second-nav li').each(function () {
        let link = $(this).find('a').attr('href');
        if(shortUrl == link) {
        let currentItem = $(this)[0].parentElement.parentElement.parentElement;    
        currentItem.firstElementChild.classList.add('second-nav__link--active');
        }
    });
    $('.second-nav__link').each(function () {
        if(shortUrl == $(this).attr('href')) {
            $(this)[0].classList.add('second-nav__link--active');
        }
    });
});

В принципе всё работает нормально, но очень смущает вот эта конструкция:

let currentItem = $(this)[0].parentElement.parentElement.parentElement;

Подскажите пожалуйста правильно ли вот так обращаться элементу? Если неправильно, то может кто-нибудь подскажет более правильный вариант решения данной задачи. Заранее благодарен.