Селектор 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();

Если вы хотите создать семантическую связь между click и hidden, рассмотрите возможность их обертывания в div, например:

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

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