Jquery selector question

Question

Hi,

I have a working selector but I just wondered whether there was another way I could write it. Here's the html structure:

<ul class="TopList">
    <li class="headTitle">
                <a href="#">THIS IS TEXT I WANT TO SELECT</a>
        <ul>
            <li id="list1">item 1</li>
            <li id="list2">item 2</li>
            <li id="list3">item 3</li>
        </ul>
    </li>
</ul>

I have a click event attached to the nested listitems. In the click event I am trying to select the anchor tag. I have used the follwing selector:

$(this).parents('li').children('a')

Is this the most efficient way of selecting the anchor tag?

Answer 1

I'd probably look for the class headTitle as well just to play it safe. Also, .closest() is a better function for scanning for the closest parent as .parents() could match multiple <li> items

$(this).closest('li.headTitle').children('a')