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

Question

我正在尝试在单击的元素 .toggle-info 的父级中找到类 .post-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/