jquery - 关于隐藏选定 div div 的 Jquery 帮助

Question

我已经说了五个 div，其布局如下面的代码所示。

//Div one
<div class="container">
<div class="hide">
    <button class="hide" value="hide" />
</div>
</div>

//Div Two
<div class="container">
<div class="hide">
    <button class="hide" value="hide" />
</div>
</div>

//Div Three
< div class="container">
<div class="hide">
    <button class="hide" value="hide" />
</div>
</div>

现在说我单击第二个 div 中的隐藏按钮，我想隐藏第二个 div.. 那就是我想隐藏与按钮单击对应的 div.. 如何仅通过 jquery 做到这一点？？？

我尝试通过 jquery 使用“this”关键字，但这会隐藏所有容器，而不仅仅是一个。请帮我

Answer 1

$('button.hide').on('click', function() {
   $(this).closest('.container').hide()
});

我指定button.hide而不是.hide选择器，因为您有更多具有该类名的不同元素

查看jQuery 文档closest()的用法

获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。

Answer 2

使用jQuery.closest()方法向上遍历 DOM 树以定位<div>. 然后你可以触发div上的隐藏。

$('button.hide').click(function() {
    $(this).closest('.container').hide();
});

当然，这是在 DOM 就绪的情况下完成的：$(document).ready(function() { /*...*/ });