jQuery最接近（）树遍历

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>

单击“按钮显示”锚点时，它应隐藏其自己的div，显示上面的“按钮隐藏” 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
})