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(); 
}); 
}); 

這些都不適用於我，我在這裏誤用'最接近（）'命令嗎？

Answer 1

你是匹配最接近的鏈接，而不是父div。應該是.parent（）。closest（）

Answer 2

是的，最接近祖先的像父母（）一樣。它上面的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 
}) 

Answer 3

只是有點不同於其他...

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