CODEWITHSUNDEEP
javascriptjquerytraversal
Joshc
Joshc

Reputation: 3853

jQuery get parent sibling for this element only

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 the div.archive-meta-slide - this is simple enough, but I'm trying to run the animation only on the current div.module it animates all the divs with the class "archive-meta-slide", and I'm really struggling to animate only the current div.archive-meta-slide using this

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

Upvotes: 26

Views: 60054

Answers (6)

rakesh
rakesh

Reputation: 59

Use 

jQuery(this).closest('.prev-class-name').find('.classname').first()

Upvotes: 4

jfriend00
jfriend00

Reputation: 708026

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")}
);

Upvotes: 10

s4y
s4y

Reputation: 51735

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')

Upvotes: 4

lxalln
lxalln

Reputation: 930

Try out closest which will let you go back until you reach the parent with the specified selector.

$(this).closest(".module")

Upvotes: 0

Markandey Singh
Markandey Singh

Reputation: 489

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">

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 238045

$(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:

Upvotes: 52

Related Questions