List ID Problem in Jquery

Question

Dear all I need to extract the List IDs "first", "second",and "final" My List has

    <div id="wrapper">
      <ul id="testnav">                
            <li> <a href="#">Page</a></li>
            <li> <a href="#">Page.</a>
                 <ul id="subnav">
                       <li id="first"><a href="#">Value1</a></li>
                       <li id="second"><a href="#">Value2</a></li>

                  </ul>
             </li>

      </ul>
      <ul id="navbelow">
                <li id="final"><a href="#">Next</a>
                </li>

      </ul>

My JQuery is following and it returns empty alert. what should i change in order to alert list id "first","second",and "final"

      $("#testnav a").click(function(ev){

      var a=$(this).attr('id'); 
      alert(a); // not working 
       ev.preventDefault(); 

   });

Answer 1

"this" in your script is referring to the anchors, and not the list-items. You don't have the id's on the anchors, so you will get nothing back when requesting .attr("id");

I'd suggest using .parent() to access the list-items, or put your click event on the list-items instead of the anchors.

Answer 2

As has been mentioned, you are referring to the anchor (A) element rather than the list element. You will need to use something like $(this).prev('li') instead of $(this)