jQuery只为这个元素获取父兄弟

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

正如你在我的标记中看到的那样,我有一个,它是我的$ metaButton - 当点击它时,它在div.archive-meta-slide上运行动画 - 这很简单,但我是试图仅在当前的div.module上运行动画,它使用类“archive-meta-slide”为所有div设置动画,而我真的很难使用此动画来设置当前div.archive-meta-slide的动画

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.

如果div.archive-meta-slide在$ metaButton的父div中,那将会很容易,但因为它在这个父div之外,所以我无法正确行进。

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

6 个解决方案

#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:

这非常接近。这实际上是说“使用类archive-meta-slide查找元素,这些元素是此元素的父元素的兄弟的后代”。您想说“使用类archive-meta-slide查找元素,这些元素是此元素的父元素的兄弟”。为此,在兄弟姐妹调用上使用选择器:

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

Note that, if the markup is always this structure, you could even do $(this).parent().next().

请注意,如果标记始终是此结构,您甚至可以执行$(this).parent()。next()。

See the jQuery API:

请参阅jQuery API:

#2

Use $(this).closest(".module") to find the parent module from where the click happens.

使用$(this).closest(“。module”)查找发生单击的父模块。

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

关于.closest()的好处是它只是在必要时查找父链,直到找到具有正确类的对象。如果其他人稍微改变你的HTML设计(在父链中添加另一个div或span或类似的东西),这比使用特定数量的.parent()引用要脆弱得多。

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:

如果#module的结构发生变化,这可能会更强大:

$(this).closest('#module').children('.archive-meta-slide')

#4

Use

$(this).parent().parent().children('.archive-meta-slide')

This is as good as searching children of top module div

这和搜索*模块div的孩子一样好

$(this).parent().parent()

will be your top

将是你的*

<div class="module">

#5

Use

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

#6

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

尝试最近,这将让你回去,直到你到达指定选择器的父亲。

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

#1

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

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