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')失败,因为它搜索直接兄弟姐妹 - 也就是说,<td>与click元素相同.
尝试找到<table>,并寻找它的兄弟:

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

要么

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

如果要在a click和它之间创建语义连接hidden,请考虑将它们包装在一个div,例如:

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

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