使用 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 元素。所以你可以通过closest找到包含它的td，然后通过next找到下一个td（因为你知道接下来是td，这是一个表格)，像这样：

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

在更一般的情况下，您想要做类似但不在表格中的事情，并且您想要查找的兄弟可能不止一个元素，您可以使用nextAll("selector").first()。但是，如果您想要的是下一个元素，并且您确信这一点，则不需要nextAll。

Answer 3

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

Answer 4

你也可以使用siblings()方法获取下一个td标签

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

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

#notapplicable{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
     <td></td>
     <td></td>
  </tr>
  <tr>
     <td><select name="YesNoNotApplicable" class="YesNoNotApplicable">
                            <option value="1">Yes</option>
                            <option value="2">No</option>
                            <option value="3">Not Applicable</option>
                        </select></td>
     <td><input type='text' id='notapplicable' /></td>
  </tr>
  
  
</table>

Answer 5

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

然后您可以使用下一个 cel。