jquery closest()树遍历

Question

我无法让我的jQuery正常工作。我有这个HTML结构：

<div class="hide"><!-- form --></div>
<div class="button-hide"><a href="#">Hide Form</a></div>
<div class="button-show"><a href="#">Show Form</a></div>

当'button- show‘锚点被点击时，它应该隐藏自己的div，显示上面的'button- hide’div，并切换上面的‘隐藏’div：

$(document).ready(function(){

$(".hide").hide();
$(".button-hide").hide();

$("div.button-show a").click(function(){
    $(this).closest("div.hide").slideToggle();
    $(this).closest("div.button-hide").show();
    $(this).hide();
});
});

所有这些对我都不起作用，我是不是在这里错误地使用了'closest()‘命令？

Answer 1

只是和其他的有点不同。

$(".button-show a").click(function(){
  $(this).parent().siblings(".button-hide").show();
  ...
});

Answer 2

您匹配的是最接近的链接，而不是父div。应为.parent().closest()

Answer 3

是的，最接近的遍历祖先就像parents()一样。上面的div不是祖先，而是兄弟(看看alex的答案)。如果你有一个用于这些div的容器div，最好使用它作为引用，如下所示：

<div class="parent-container">
  <div class="hide"><!-- form --></div>
  <div class="button-hide"><a href="#">Hide Form</a></div>
  <div class="button-show"><a href="#">Show Form</a></div>
</div>

然后在您的jquery中

$(".button-show a").click(function(){
  $(this).parents(".parent-container").find(".button-hide").show();
  etc
})