Select the next <td> in a table using jQuery

Within the change callback, this will refer to the select element. So you can find the td containing it with closest, and then the next td via next (since you know the next thing is a td, this is a table), like this:

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

In the more general case where you want to do something similar but not in a table, and the sibling you want to find may be more than one element away, you might use nextAll("selector").first(). But if the thing you want is the next element, and you're sure of that, you don't need nextAll.


If you are using strongly typed model and html helpers for your view, it would probably better to create input element while creating the table. The reason is the elements you would create via jQuery won't be bound to your model.

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

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

Tags:

Html

Jquery