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 中的链接。我可以获得单选按钮的值，但无法弄清楚我将使用什么选择器语法来启用/禁用 just 单选按钮之后的 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

我会尝试不同的方法，给每个链接一个 id，或者甚至是一个类以便于选择：

<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();

我也不确定启用/禁用是否可以与 div 或 a-tag 一起使用，您最好使用 fadeOut() 和 fadeIn() 或者只是 show() 和 hide() 来“禁用”链接。