javascript - サブヘッダーがクリックされたときにメインヘッダーに下線を引く

Question

HTML:

<div id=wrapDesktopNavBar>
    <ul class="desktopNavBar">
        <li><a class="firstLevel" href="#">header 1</a>
        </li>
        <li><a onclick....></a><a class="firstLevel" href="#">header 2</a> 
            <ul>
                <li><a class="secondLevel" href="#">1st sub header</a> 
                    <li><a class="secondLevel" href="#">2nd sub header</a> 
                        <li><a class="secondLevel" href="#">3rd sub header</a> 
            </ul>
            <li><a class="firstLevel" href="#">header 3</a>
            </li>
    </ul>
</div>

JS:

$(function () {
    $('.mainNavSection').hide();
    $('.desktopNavBar a').bind('click', function (e) {
        $('.desktopNavBar a.current').removeClass('current');
        $('.mainNavSection:visible').hide();
        $(this.hash).show();
        $(this).addClass('current');
        $(this).closest('.desktopNavBar > li').find('a:first').addClass('current');
        e.preventDefault();
    }).filter(':first').click();
});

こんにちは、上記は私のhtmlとjavascriptです。「current」というクラスがあり、クリックするとヘッダーとそのサブヘッダーに下線が引かれます。サブヘッダーがクリックされたときにメインヘッダーに下線が引かれるようにしたい。私は試しまし$(this).closest('.desktopNavBar > li').find('a:first').addClass('current');たが、最初のタグにのみ下線を付け、2番目のタグには下線を付けません。2 番目のタグに下線を付けたい。また、2 番目のタグを 1 番目の a と交換することはできません。

.find(a:second)2番目のタグにクラスを追加できるようにするようなものはありますか?