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

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

这将在点击的div之后得到下一个兄弟.请注意,此方法(与前一个方法相对)依赖于.post-info作为下一个兄弟的确切位置,并且如果其位置发生变化将会中断.你可以在这里看到这个工作:http://jsfiddle.net/jfriend00/qGCLx/