accessing div inside the td using jquery

Question

not sure why I find this so difficult. Here is the html code:

<tr>
                <td>FirstName 9</td><td>LastName 9</td><td>
    <a href="#" id="linkSponsorMessage">View</a>

    </td><td>   

    <div class="divSponsorMessage" style="display:none">
    Greetings FirstName 9, LastName 9!
    </div>

    </td>
            </tr>

I need to access the <div> when click on the anchor link using JQuery.

UPDATE:

I got to work:

$("#linkSponsorMessage").parent("td").next("td").children("div")

But is there a better way!!!

UPDATE 2:

Also, since I am using multiple DIVS and anchor tags I had to do $(this) to refer to the current anchor tag that was triggered.

$(document).ready(function() 
{
    $("a").mouseover(function()     
    {
        var divs = $(this).closest("tr").find("div").fadeIn("slow"); 

    });

    $("a").mouseout(function()     
    {
        var divs = $(this).closest("tr").find("div").fadeOut("slow"); 

    });


});

Answer 1

Just use

$("a").click(function(){alert("clicked");return false;};)

The above code would show an alert clicked and would not allow the default functionality of link click to happen.

Hope this helps.

Answer 2

try this

 $(td a).click(function(){
  alert('hello');
   return false;
 });

Answer 3

You can use this:

$("#linkSponsorMessage").closest("tr").find("div")

or:

$("#linkSponsorMessage").closest("tr").find(".divSponsorMessage")

Answer 4

$('div.divSponsorMessage');