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");
});
});
You can use this:
$("#linkSponsorMessage").closest("tr").find("div")
or:
$("#linkSponsorMessage").closest("tr").find(".divSponsorMessage")
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With