Underline the main header when the sub header is clicked

Underline the main header when the sub header is clicked

<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>
$(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();
});
Hi the above is my html and javascript. I have a class called "current"
which simply underlines the header and its subheader when it's being
clicked. I want to allow the main header to be underlined when the sub
header is being clicked. I've tried $(this).closest('.desktopNavBar >
li').find('a:first').addClass('current'); but it only underlines the first
a tag and not the second a tag. I want the 2nd tag to be underlined. And,
i can't swap my 2nd tag with my 1st a because it affects smth else.
is there soemthing like .find(a:second) to allow me to add class to the
2nd a tag?