Javascript jQuery仅获取此元素的父兄弟

jQuery get parent sibling for this element only

提问by Joshc

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.moduleit animates all the divs with the class "archive-meta-slide", and I'm really struggling to animate only the current div.archive-meta-slideusing this

正如你在我的标记中看到的那样，我有一个<span>这是我的$metaButton- 当它被点击时，它运行动画div.archive-meta-slide- 这很简单，但我试图只在div.module它动画所有的当前运行动画类的 div "archive-meta-slide"，我真的很努力只为当前div.archive-meta-slide使用设置动画this

It would be easy if the div.archive-meta-slidewas 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位于 的父 div 内会很容易$metaButton，但是因为它在该父 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

谢谢乔希

回答by lonesomeday

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

This is reallyclose. This actually says "find elements with the class archive-meta-slidethat are descendants of siblings of this element's parent". You want to say "find elements with the class archive-meta-slidethat aresiblings of this element's parent". For that, use a selector on the siblingscall:

这真的很接近。这实际上是说“找到archive-meta-slide属于该元素父级兄弟姐妹后代的类的元素”。你想说“找到类元素archive-meta-slide即是此元素的父的兄弟姐妹”。为此，在siblings调用中使用选择器：

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

• siblings
• find
• next

• siblings
• find
• next

回答by jfriend00

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()是它只在必要时查找父链，直到找到具有正确类的对象。.parent()如果其他人稍微更改您的 HTML 设计（在父链中添加另一个 div 或 span 或类似的东西），这比使用特定数量的引用要脆弱得多。

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

回答by s4y

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

回答by rakesh

Use

用

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

回答by Markandey Singh

Use

用

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

This is as good as searching children of top module div

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

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

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

will be your top

将是你的首选

<div class="module">

回答by lxalln

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

尝试最接近，这将让您返回，直到您使用指定的选择器到达父级。

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