jQuery get parent sibling for this element only
Solution 1
$(this).parent().siblings().find(".archive-meta-slide")
This is really close. This actually says "find elements with the class archive-meta-slide
that are descendants of siblings of this element's parent". You want to say "find elements with the class archive-meta-slide
that are siblings of this element's parent". For that, use a selector on the siblings
call:
$(this).parent().siblings(".archive-meta-slide")
Note that, if the markup is always this structure, you could even do $(this).parent().next()
.
See the jQuery API:
Solution 2
Use $(this).closest(".module")
to find the parent module from where the click happens.
You also probably want to use a completion function to change the text after you do the animation.
The nice thing about .closest()
is that it just looks up the parent chain as far as necessary until it finds an object with the right class. This is much less fragile than using a specific number of .parent()
references if someone else changes your HTML design a little bit (adds another div or span or something like that in the parent chain).
var $metaButton = $("span.archive-meta");
$metaButton.toggle(
function() {
var $slide = $(this).closest(".module").find(".archive-meta-slide");
$slide.animate({ height: "0" }, 300, function() {
$slide.html("close");
});
},
function() {
var $slide = $(this).closest(".module").find(".archive-meta-slide");
$slide.animate({ height: "43px" }, 300, function() {
$slide.html("open");
});
},
});
You could also DRY it up a bit and make a common function:
function metaToggleCommon(obj, height, text) {
var $slide = $(obj).closest(".module").find(".archive-meta-slide");
$slide.animate({ height: height}, 300, function() {
$slide.html(text);
});
}
var $metaButton = $("span.archive-meta");
$metaButton.toggle(
function() {metaToggleCommon(this, "0", "close")},
function() {metaToggleCommon(this, "43px", "open")}
);
Solution 3
You’re looking for…
$(this).parent().next('.archive-meta-slide')
If the structure of #module changes, this might be more robust:
$(this).closest('#module').children('.archive-meta-slide')
Solution 4
Use
jQuery(this).closest('.prev-class-name').find('.classname').first()
Solution 5
Use
$(this).parent().parent().children('.archive-meta-slide')
This is as good as searching children of top module div
$(this).parent().parent()
will be your top
<div class="module">
Joshc
Begun life as designer. Pixels are my specialty. I like to consider myself a CSS wizard, making beautiful photoshop files into exactly CSS replicas - pixel for pixel. I love CSS3 and wish the world would catch up. I hate IE jQuery is awesome, but need to understand it better. I love building wordpress wordpress, but again my understanding of PHP is basic. Big Love
Updated on July 23, 2020Comments
-
Joshc over 3 years
I cant figure out how to write this.
See my mark up structure, which is repeated multiple times on a page.
<div class="module"> <div class="archive-info"> <span class="archive-meta"> open </span> </div> <div class="archive-meta-slide"> </div> </div>
As you can see inside my mark-up, I have a
<span>
which is my$metaButton
- when this is clicked, it runs the animation on thediv.archive-meta-slide
- this is simple enough, but I'm trying to run the animation only on the currentdiv.module
it animates all the divs with the class"archive-meta-slide"
, and I'm really struggling to animate only the currentdiv.archive-meta-slide
usingthis
It would be easy if the
div.archive-meta-slide
was inside the parent div of$metaButton
, but because it's outside this parent div, I can't get the traversing right.See my script
var $metaButton = $("span.archive-meta"), $metaSlide = $(".archive-meta-slide"); $metaButton.toggle( function() { $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "0" }, 300); $(this).parent().siblings().find(".archive-meta-slide").html("close"); }, function() { $(this).parent().siblings().find(".archive-meta-slide").animate({ height: "43px" }, 300); $(this).parent().siblings().find(".archive-meta-slide").html("open"); });
Can anyone help?
Thanks Josh
-
XoXo over 6 yearsthe use of
closest()
is more robust, as jfriend00 has explained.