Select next elements

Question

I have a table with inputs

<tr>
    <th>Linha X</th>
    <td><input type="number" name="AAA"></td>
    <td><input type="number" name="BBB" onchange="xxx(this)"></td>
    <td><input type="number" name="CCC" disabled></td>
    <td><input type="number" name="DDD" disabled></td>
</tr>

In the input with onchange, performs the function xxx().

What I’d like in the job is to get the next name inputs, in this case "CCC and DDD".

Taking advantage would like to know how to catch the previous one too ("AAA").

I tried to use the next(), nextAll(), find(), but I couldn’t.

var a = $(elementothis).next('input');
var a = $(elementothis).nextAll('input');

Answer 1

As explained above, the <input> where the code breaks, there are no brothers, and he’s alone in the <td>, soon enough next, as nextAll or find can’t find anything. You need to go first to the <td> (father), then sail to another <td> and access your child.

You can do this with parent, next, children and first

function xxx(elem){
  $(elem).parent().next().children().first().val("150");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
      <th>Linha X</th>
      <td><input type="number" name="AAA"></td>
      <td><input type="number" name="BBB" onchange="xxx(this)"></td>
      <td><input type="number" name="CCC" disabled></td>
      <td><input type="number" name="DDD" disabled></td>
  </tr>
</table>

Or more dynamically with closest and find:

function xxx(elem){
  $(elem).closest("tr").find("[name=CCC]").val("150");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
      <th>Linha X</th>
      <td><input type="number" name="AAA"></td>
      <td><input type="number" name="BBB" onchange="xxx(this)"></td>
      <td><input type="number" name="CCC" disabled></td>
      <td><input type="number" name="DDD" disabled></td>
  </tr>
</table>

This form is more dynamic and makes html more flexible, in addition to being simpler as well.

The closest navigate up to the <tr>, and the find navigate down to the element that matters according to the specified selector.

If you need to access several, it is best to use a generic selector on find and get the array representing the captured elements:

function xxx(elem){
  const inputs = $(elem).closest("tr").find("input");
  
  inputs.eq(0).val("100"); //AAA  
  inputs.eq(2).val("150"); //CCC
  inputs.eq(3).val("200"); //DDD
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
      <th>Linha X</th>
      <td><input type="number" name="AAA"></td>
      <td><input type="number" name="BBB" onchange="xxx(this)"></td>
      <td><input type="number" name="CCC" disabled></td>
      <td><input type="number" name="DDD" disabled></td>
  </tr>
</table>

Access to position is given by the method eq. Remember that with this selector captures all <input> including the event itself.

Answer 2

The problem is that the input are inside td.

To documentation of .next() says the method catches the immediate brother element to the informed on its selector.

A simple solution to the problem using Javascript would be like this:

this.parentElement.nextSibling.querySelector('input');

To access the input in td above looks like, need to change little thing:

this.parentElement.previousSibling.querySelector('input');

jQuery is Javascript.