jQuery: выбор первого экземпляра элемента, который происходит после другого указанного элемента.

Question

Используя это как упрощенный пример, предположим, что у меня есть таблица с несколькими переключателями в ней, за которой следует элемент div со ссылкой в ​​нем. Эта картина повторяется некоторое неизвестное количество раз, как так:

<table class="rdoBtnList"> 
    <tbody> 
     <tr> 
      <td> Person 1 </td> 
      <td> 
      <label for="rb1">Verified</label> 
      <input type="radio" id="rb1" name="rdoBtns" value="Verified" /> 
      <label for="rb2">Not Verified</label> 
      <input type="radio" id="rb2" name="rdoBtns" value="NotVerified" /> 
      </td> 
     </tr> 
    </tbody> 
</table> 
<div class="PersonLink"><a href="#">Link to Person 1 page</a></div> 
    ..... tables and divs for person 2, 3, ... n, etc 

Я хотел бы иметь возможность использовать JQuery, чтобы включить/отключить ссылку в DIV следующих кнопок радио на основе значения переключателя , Я могу получить значение переключателей, но не могу понять, какой синтаксис селектора я использовал бы для включения/выключения только div после переключателей.

Вот мой JQuery до сих пор:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $(".rdoBtnList > tbody > tr > td > input").change(function() { 
      if ($(this).val() == "Verified") { 
       // select the link in the div following the table and enable it 
      } else { 
       // select the link in the div following the table and disable it 
      } 
     }); 
     }); 
    </script> 

Answer 1

Как это:

$(this).closest('.rdoBtnList').nextAll('.PersonLink:first').children('a').whatever 

closest('.rdoBtnList') найти таблицу, и nextAll('.PersonLink:first') будет найти первый .PersonLink после таблицы.

Кстати, функция val возвращает нормальное булево значение. Вы должны написать if($(this).val()).

Answer 2

Я бы попробовал другой подход, давая каждую ссылку идентификатора, или, возможно, даже класса для облегчения выбора:

<table>... 
    <input type="radio" id="personXrb1" class="personXselector" ... 
<div> 
<a href="personXlink" id="personXselector">link to person X</a> 

Это должно быть относительно легко, как я ожидаю, что HTML генерируется программно. Правильно? Он также будет менее подвержен ошибкам из-за изменений кода и, возможно, будет легче читать. Выбор

бы тогда не сделать с $ (это) .closest и т.д., что не гарантирует работу после изменения кода вокруг, но вместо того, чтобы через

$('#' + $(this).attr('class')).doStuff(); 

Я также не уверен, что включение/disable будет работать с div или a-тегом, вам может быть лучше использовать fadeOut() и fadeIn() или просто show() и hide() для «отключения» ссылок.