在单击元素的父级中查找一个类

Question

我试图在单击元素的父级内找到类.post-info .toggle-info。现在，页面上的所有.post-info都会切换。我试图得到只有一个.post-info切换它的父容器，.post。

<div class="post"> 
<div class="toggle-info">Toggle Btn</div> 

<div class="post-info"> 
    <p>Toggle this content</p> 
</div> 

</div> 


$(".toggle-info").click(function() { 
    $(".post-info").animate({ 
    height: "toggle", 
    opacity:"toggle" 
    }, 520, 'swing'); 
}); 

在此先感谢您的帮助！

Answer 1

你可以这样说：

$(this).closest(".post").find(".post-info").animate(...) 

这个上升从那里点击发生和发现.post类的父链，然后发现在父.post-info，然后动画应用到这一点。这是非常灵活的.post-info可以在.post父母的任何地方，这将工作。你可以看到它在这里工作：http://jsfiddle.net/jfriend00/AeYZU/

对于这个特殊的确切HTML，你也可以使用这样的：

$(this).next().animate(...) 

这会得到被点击的股利后的下一个兄弟。请注意，这种方法（与前一种方法相反）依赖.post-info的确切位置作为下一个兄弟，并且如果其位置改变将会中断。你可以在这里看到这个工作：http://jsfiddle.net/jfriend00/qGCLx/