如何将相同的jQuery代码应用于同一个类的两个实例？

Question

例如我有这段代码：

$('.note .exit').click(function() {
  $('.note').fadeOut();
});

在我的HTML上有两个.exit和.note实例。如：

<div class="note">
        <img src="images/exit.png" class="exit"/>

        <p>Some text.</p>   
</div>

<div class="note">
        <img src="images/exit.png" class="exit"/>

        <p>Some other text.</p> 
</div>

问题是当我单击一个.note的关闭按钮（退出图像）时，另一个.note也会关闭。如何修改代码，使其仅适用于我正在关闭的特定.note类？

Answer 1

使用.closest() ^[docs]获取与选择器匹配的最近祖先：

$('.note .exit').click(function() {
  $(this).closest('.note').fadeOut();
});

根据您的结构，您还可以使用.parent() ^[docs]。

Answer 2

使用$(this).parent().fadeOut() ... this将是点击发生的.exit。

Answer 3

试试这个：

 $('.note .exit').click(function() {
  $(this).closest('.note').fadeOut();
});