需要 jquery 选择器从元素中选择下一个表

Question

我需要一个选择器，它基本上从我单击的元素开始，并查找页面上具有特定类的下一个项目。请参阅下面的示例：

<table>
<tr>
<td>Blah blah blah</td>
<td><p class="click">Fire jquery</p></td>
</tr>
</table>

<table class="hidden">
<tr>
<td>blah blah blah</td>
<td>blah blah blah</td>
</tr>
</table>

$(document).ready(function() {

$('.hidden').hide()

$('.click').click(function() {
$(this).next('.hidden').fadeIn()
})

})

所以基本上我想在页面加载时隐藏隐藏类的所有内容。然后，当单击具有单击类的内容时，它应该向下扫描页面以查找具有隐藏类的下一个元素并将其淡入。我只会执行 ('.hidden').fadeIn() 但 iv 得到了多个隐藏的项目，所以它会淡入所有项目，我只想淡入下一个项目。

希望您理解这一切，我将非常感谢任何可以提供帮助的人，

谢谢

Answer 1

next('.hidden') 失败，因为它搜索直接同级 - 即，在与 click 元素相同的 上.
尝试查找 ，并查找其同级：

$(this).closest('table').next('.hidden').fadeIn();

或者

$(this).closest('table').next('.hidden:hidden').fadeIn();

如果您想在 click 与其 hidden 之间创建语义连接，考虑将它们都包装在 div 中，例如：

<div class="Group">
  <p class="click">Fire jquery</p>
  <table class="hidden" />
</div>

$(this).closest('.Group').find('.hidden').fadeIn();