Hey, I'm a newbie to jQuery and I'm trying to make changes to divs that are two levels above the function trigger:
Here's my initial attempt: I try to locate the closest '.node' which is the parent of all other divs and then modify the children divs.
<script>
function details() {
$node = $(this).closest(".node");
$node.find(".content.right .user").show();
$node.find(".options").show();
$node.find(".details").hide();
}
</script>
Since that didn't work, I then tried something like this:
<script>
function details() {
$node = $(this).parent(".details").parent(".node");
$node.find(".content.right .user").show();
$node.find(".options").show();
$node.find(".details").hide();
}
</script>
Unfortunately, that didn't work either, so now I'm stuck. Here's my HTML setup:
<div class="node">
<div class="avatar left" style="background-image:url(assets/default_avatar.png);"></div>
<div class="content right">
<div class="user">Foo <a href="./">~Foo_bat</a></div>
Integer quis ante iaculis, mollis nibh fermentum, vestibulum massa. Quisque et erat et dolor sagittis posuere eu ac risus. Vestibulum a varius turpis. Nunc tincidunt ipsum at tellus volutpat vestibulum. Nulla elementum neque a lectus ullamcorper, eu amet.</div>
<div class="options">
<a class="left" href="./reply">Reply</a>
<a class="left" href="./repost">Repost</a>
<a class="right" href="./report">Report</a>
</div>
<div class="details">
<a class="right" href="#" onclick="details()">Details</a>
</div>
</div>
Any ideas why this isn't working? It's probably something simple, but I can't figure it out...