To give a simplified example, I've got the following block repeated on the page lots of times (it's dynamically generated):
<div class="box">
<div class="something1"></div>
<div class="something2">
<a class="mylink">My link</a>
</div>
</div>
When clicked, I can get to the parent of the link with:
$(".mylink").click(function() {
$(this).parents(".box").fadeOut("fast");
});
However... I need to get to the <div class="something1">
of that particular parent.
Basically, can someone tell me how to refer to a higher-level sibling without being able to refer to it directly? Let's call it big brother. A direct reference to the big brother's class name would cause every instance of that element on the page to fade out - which is not the desired effect.
I've tried:
parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.
Anyone? Thanks.
Calling .parents(".box .something1")
will return all parent elements that match the selector .box .something
. In other words, it will return parent elements that are .something1
and are inside of .box
.
You need to get the children of the closest parent, like this:
$(this).closest('.box').children('.something1')
This code calls .closest
to get the innermost parent matching a selector, then calls .children
on that parent element to find the uncle you're looking for.