使用jQuery选择表中的下一个<td>

Question

我正在开发一个asp.net mvc 3应用程序.我正在使用数据库中的数据动态构建表.我有一个特例,当一行中的第三列/单元格是下拉列表时:

<select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select>

在这种情况下,第四列/单元格保持为空,并且如果用户在第四单元格中选择3(不适用),则应该显示文本框,其中用户可以写入附加信息.我对JS和jQuery知之甚少,但是我发现如何从下拉列表中获取所选值:

$(document).ready(function () {
        $('.YesNoNotApplicable').change(function () {
            alert($('.YesNoNotApplicable').val());
        });
    });

但现在我需要检查警报我是否需要检查值是否为3(这是我自己可以自己去的)以及显示/隐藏或追加/删除下一个单元格中的文本框,或者我们是否在DOM中进行讨论.

那么我如何导航到class = YesNoNotApplicable旁边的那个,以及处理这个文本框的最佳方法是什么 - 把它放在我正在创建表格然后显示/隐藏它或处理它的时候在运行时使用它并追加/删除它,我怎么能这样做？

Answer 1

如果您为视图使用强类型模型和html帮助器,则在创建表时创建输入元素可能会更好.原因是您将通过jQuery创建的元素不会绑定到您的模型.

$(document).ready(function () {
   $('.YesNoNotApplicable').change(function () {
       if($(this).val() === "3")
         $(this).closest('td').next('td').find('input').show();
   });
});

Answer 2

在change回调中,this将引用该select元素.所以你可以找到td包含它的closest,然后是下一个tdvia next(因为你知道下一个是a td,这是一个表),像这样:

var $nextTD = $(this).closest('td').next();

在更一般的情况下,您想要做类似但不在表中的事情,并且您想要查找的兄弟可能不止一个元素,您可以使用nextAll("selector").first().但是如果你想要的东西是下一个元素,并且你确定这一点,那么你就不需要了nextAll.