jQuery仅为此元素获取父级同级 [英] jQuery get parent sibling for this element only

问题描述

我不知道该怎么写.

查看我的标记结构，该结构在页面上重复多次.

<div class="module">    
    <div class="archive-info">
        <span class="archive-meta">
            open
        </span>                         
    </div>
    <div class="archive-meta-slide">
    </div>                              
</div>

正如您在我的标记中看到的那样，我有一个<span>，它是我的$metaButton-单击此按钮时，它会在div.archive-meta-slide上运行动画-这很简单，但是我试图只在当前的div.module上运行动画，它将所有

类的div动画化，而我真的很努力地使用this

仅对当前的div.archive-meta-slide进行动画处理.

如果div.archive-meta-slide位于$metaButton的父div内将很容易，但是由于它位于该父div的外部，因此无法正确遍历.

查看我的脚本

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

任何人都可以帮忙吗?

谢谢 乔什

解决方案

$(this).parent().siblings().find(".archive-meta-slide")  

这是真的关闭.这实际上说的是找到类archive-meta-slide的元素，这些元素是该元素的父级的兄弟姐妹的后代".您想说找到类archive-meta-slide的元素，该类是该元素的父级的兄弟姐妹".为此，请在siblings调用上使用选择器:

$(this).parent().siblings(".archive-meta-slide")  

请注意，如果标记始终是这种结构，则您甚至可以执行$(this).parent().next().

请参阅jQuery API:

• siblings
• find
• next

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

解决方案

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

这篇关于jQuery仅为此元素获取父级同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！