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

回答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:

siblings
find
next

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

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

回答4:

Use

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

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

回答6:

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

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

来源：https://stackoverflow.com/questions/8591887/jquery-get-parent-sibling-for-this-element-only

标签

javascript

jquery

traversal