Jquery: How do I get the url of an anchor contained within a clicked 'li' tag?

Question

The following is a segment of HTML in one of my pages:

<li class="prodcat-line">
   <a title="foobar" class="prodcat" href="/some/url.php">Foobar</a>
</li>

I want to be able to retrieve the url of the clicked on li tag. My "jQuery fu" IS NOT WHAT IT SHOULD BE. I know how to bind the click event of li elements of class "prodcat-line", but I don't know how to extract nested tags from within the clicked item - can anyone help?

Solution 1

$('.prodcat-line').click(function(){
    alert($('a', this).attr('href'));
    return false;
});

Example here.

Solution 2

$('a').click(function(e) {
    e.preventDefault();
    alert($(this).attr('href'));
});

Check working example at http://jsfiddle.net/4XU8h/

Solution 3

How about:

$('.prodcat').click(function(event) {
    var url = $(this).attr('href');
});

Since you only have the link within the LI, you don't need to reference the LI. Every click on the LI will target the link anyway.

Comments

[oompahloompah]

exactly what I needed, thanks. I'll accept your answer as soon as I'm able to (in about 7 mins)