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 генерируется программно. Правильно? Он также будет менее подвержен ошибкам из-за изменений кода и, возможно, будет легче читать.

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

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

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