Question

I have some table data with some codes:

<tr>
  <td><input type='text' class='ACode' value='3400' /></td>
  <td><input type='text' class='DCode' value='100' /></td>
<tr>
<tr>
  <td><input type='text' class='ACode' value='3000' /></td>
  <td><input type='text' class='DCode' value='130' /></td>
<tr>
<tr>
  <td><input type='text' class='ACode' value='2500' /></td>
  <td><input type='text' class='DCode' value='110' /></td>
<tr>

When I want to access the ACode next input value using jQuery like this:

$('.ACode').change(function(){
  var that = $(this);
  var DCode =  that.next('.DCode').val();
});

it doesn’t show the value.

Answer 1

Try the following instead:

var DCode =  that.parent().next().find('.DCode').val();

.ACode does not have siblings, thus .next() does not get anything, since it only returns the immediately following siblings. Instead, you should go to the parent td, which indeed has one sibling, use .next() to get to the next td, and then find .DCode.

DEMO.