Javascript-форум - Многоуровневое дерево

Есть многоуровневое дерево разделов, в которых статьи. При нажатие на заголовок раскрывается список статей с силками.
Задача: при переходе на статью которая например находиться на третьем уровне вложенность сделать так чтоб все родители были развернуты. Уровень вложенности не известен

<ul class="tree" id="tree">
    <li><span class="caret">Заголовок</span>
        <ul class="nested"> <!--добавить класс active-->
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><a href="/link-l1/">Ссылка</a></li>
            <li><span class="caret">Заголовок</span>
                <ul class="nested"> <!--добавить класс active-->
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><a href="/link-l2/">Ссылка</a></li>
                    <li><span class="caret">Заголовок</span>
                        <ul class="nested"> <!--добавить класс active-->
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><a href="/link-l3/">Ссылка</a></li>
                            <li><span class="caret">Заголовок</span>
                                <ul class="nested"> <!--добавить класс active-->
                                    <li><a href="/link-l4/">Ссылка</a></li> <!--selected-->
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                    <li><a href="/link-l4/">Ссылка</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<!--Это все на что меня хватило. Класс добавляется только к ближайшему родителю-->
$('ul.nested a').each(function () {
    let location = window.location.protocol + '//' + window.location.host + window.location.pathname;
    let link = this.href;

    if (link == location) {
        $(this).closest('.nested').addClass('active');
    }
});

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .active { border: 1px solid red; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { let location = 'test';//window.location.protocol + '//' + window.location.host + window.location.pathname; $(`a[href*="${location}"]`).parent().addClass('active').parents('.nested').addClass('active'); }); </script> </head> <body> <ul class="tree" id="tree"> <li><span class="caret">Заголовок</span> <ul class="nested">  <li><a href="/link-l1/">Ссылка</a></li> <li><a href="/link-l1/">Ссылка</a></li> <li><a href="/link-l1/">Ссылка</a></li> <li><a href="/link-l1/">Ссылка</a></li> <li><a href="/link-l1/">Ссылка</a></li> <li><span class="caret">Заголовок</span> <ul class="nested">  <li><a href="/link-l2/">Ссылка</a></li> <li><a href="/link-l2/">Ссылка</a></li> <li><a href="/link-l2/">Ссылка</a></li> <li><a href="/link-l2/">Ссылка</a></li> <li><a href="/link-l2/">Ссылка</a></li> <li><span class="caret">Заголовок</span> <ul class="nested">  <li><a href="/link-l3/">Ссылка</a></li> <li><a href="/link-l3/">Ссылка</a></li> <li><a href="/link-l3/">Ссылка</a></li> <li><a href="/link-l3/">Ссылка</a></li> <li><a href="/link-l3/">Ссылка</a></li> <li><span class="caret">Заголовок</span> <ul class="nested">  <li><a href="/test/">Ссылка</a></li>  <li><a href="/link-l4/">Ссылка</a></li> <li><a href="/link-l4/">Ссылка</a></li> <li><a href="/link-l4/">Ссылка</a></li> <li><a href="/link-l4/">Ссылка</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html>