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

You can use this:

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

or:

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