jquery click question

Question

Hello,

My html:

<div id="menu"><ul><li>menu one<ul>
<li><a id="home">home</a></li>
<li><a id="contact">contact us</a></li>
</ul></li></ul></div>

Jquery :

    $('#menu').click(function(){
        alert($(this).find('a').attr('id'));
    });

I want to find value of a clicked. my code return empty.

Answer 1

$('#menu a').click(function(){
    alert($(this).html());
});

If you want the id, then do

$('#menu a').click(function(){
    alert($(this).attr('id'));
});

Answer 2

Your .find('a') will return multiple elements. If you want to display each of their values loop using .each(). Else do something like this: .find('a')[0].attr('id')

Looping code:

xxx.find('a').each( alert($(this).attr('id')); )

Answer 3

Your code works for me, it returns "home" every time as that's the first descendant a of the div. Perhaps you're looking something more like

  $('#menu a').click(function(){
        alert($(this).attr('id'));
  });​

Fiddle http://jsfiddle.net/rsbPt/

Answer 4

The reason why this won't work is because $(this).find('a') returns an array, thus you need to iterate over all of the anchors in #menu to obtain their id. You can do that with the .each() function:

$('#menu').click(function(){
  $(this).find('a').each(function(){ alert(this.id) });
});

Will give you two alert() for the HTML you gave, each with a different id. You can then replace the alert() with whatever function you need to perform on each of the anchors.