下一个元素的Javascript dom选择答案

【问题标题】：Javascript dom selection of next element下一个元素的Javascript dom选择
【发布时间】：2014-09-23 12:43:57
【问题描述】：

这大概是我的设置：

<div class="wrapper">
    <div class="first">
        <a class="button" href="">click</a>
    </div>

    <div class="second">
         <div class="third">
             Stuff
         <div>
    </div>
</div>

好的，所以我想要的是：当您单击 a 标签时，.third div 应该动画。

到目前为止，我所拥有的是：

button.click ->
    third.animate
        left: '+=100%'

问题是，我在一页上有多个这样的包装器。因此，当我单击按钮时，页面上的每个“.third” div 都会动画。我怎样才能选择正确的并且只选择那个？

谢谢！

【问题讨论】：

您使用jquery-animate 进行了标记，但没有使用 jQuery，看起来您正在使用咖啡脚本？为您的问题添加适当的标签

标签： javascript html css coffeescript animated

【解决方案1】：

试试这个：

$('a').click(function(){
     var third = $(this).closest('.wrapper').find('.third'); 
     //use third variable to animate
});

您可以使用closest 或parents。

【讨论】：

parent() 只查看元素的直接祖先。使用closest 向上查看树。
@TommyBrunn 谢谢.. 我实际上是在尝试使用.parents()。
您的示例现在不起作用。 closest 只向上搜索。所以你必须做var third = $(this).closest('.wrapper').find('.third');

【解决方案2】：

如果您只希望一个 div 动画，请为该 div 分配一个 id 并仅通过$("#third").animate("left", "100%");为那个 div 动画

【讨论】：