5

Tenho uma table com 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>

No input com onchange, executa a função xxx().

O que gostaria na função é pegar os próximos name dos inputs, nesse caso "CCC e DDD".

Aproveitando gostaria de saber como pegar o anterior também ("AAA").

Tentei usar o next(), nextAll(), find(), mas não consegui.

var a = $(elementothis).next('input');
var a = $(elementothis).nextAll('input');
8
  • Na verdade vc precisa pegar o attr name dos siblings... mas tb não sei como fazer :D
    – hugocsl
    Commented 14/03/2019 às 11:58
  • @hugocsl Eu não consigo chegar no elemento rs... acho que se chegar até ele, o resto fica tranquilo. Pelo find() consigo buscar todos elementos input do form, mas não consegui posicionar o seletor no elemento que vem pelo this, se não era só chamar o próximo da lista... mas não deu não... rs
    – rbz
    Commented 14/03/2019 às 12:02
  • Vai conseguir com parents('tr').find('th').eq(3) depois o input. Vou fazer uns testes aqui. Commented 14/03/2019 às 12:05
  • @LaércioLopes não tem uma forma mais dinâmica?
    – rbz
    Commented 14/03/2019 às 12:06
  • this.parentElement.nextSibling.querySelector('input');
    – DaviAragao
    Commented 14/03/2019 às 12:10

2 Respostas 2

4

Como já foi explicado, o <input> de onde parte o código não tem irmãos, e está sozinho no <td>, logo tanto next, como nextAll ou find não encontram nada. Precisa de primeiro ir para até ao <td> (pai), depois navegar para outro <td> e aceder ao seu filho.

Pode fazer isso com parent, next, children e 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>

Ou de forma mais dinamica com closest e 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>

Esta forma é mais dinâmica e torna o html mais flexível, para além de ser mais simples também.

O closest navega para cima até ao <tr>, e o find navega para baixo até ao elemento que interessa de acordo com o seletor especificado.

Se precisar de aceder a vários é melhor utilizar um seletor genérico no find e obter o array que representa os elementos capturados:

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>

O acesso à posição é dado pelo método eq. Lembre-se que com este seletor captura todos os <input> incluindo o próprio de onde partiu o evento.

5
  • Isac, o find eu estava tentando usar da seguinte maneira: Pego todos elementos input do form, gerando uma lista. Então tenho todos input e o elemento do contexto (que veio pelo this). Se eu conseguisse identificar na lista o input do contexto, eu daria um next na lista, e conseguiria selecionar o próximo. Da forma que fez não ficou dinâmico porque você travou o atributo name...
    – rbz
    Commented 14/03/2019 às 13:11
  • @rbz Mas o find permite achar vários. Dei um exemplo com o name so para ser simples, mas quando acabar de almoçar já meto aqui outro. basicamente .closest("tr").find("input") acha todos os input da lista e por isso todos os irmãos.
    – Isac
    Commented 14/03/2019 às 13:21
  • Sim, ele acha todos.. automaticamente eu teria a lista na sequência... como minha função trás o elemento ( onchange=xxx(this) ), eu conseguiria posicionar o cursor na lista... aí só daria next... e colocaria até X valor de quantos inputs pular... não?
    – rbz
    Commented 14/03/2019 às 13:25
  • @rbz Sim acha todos, e basta aceder ao elemento correto com eq por exemplo. Já editei a minha resposta para dar esse exemplo também.
    – Isac
    Commented 14/03/2019 às 13:54
  • Deu certo, mas tive que travar a posição... pois se tenho tr com quantidades diferentes de td, ele busca errado se travar a posição no eq...
    – rbz
    Commented 14/03/2019 às 14:43
1

O problema é que os input estão dentro de td.

A documentação de .next() diz que o método pega o elemento irmão imediato ao informado no seu seletor.

Uma solução simples para o problema usando JavaScript seria assim:

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

Para acessar o input na td acima fica parecido, precisa mudar pouca coisa:

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

jQuery é JavaScript.

2
  • DaviAragao, sei que jQuery é JS, mas eu realmente gostaria da solução em jQuery, para não ficar misturando... Se não houver outra saída, aí sim terei que usar o JS...
    – rbz
    Commented 14/03/2019 às 13:06
  • 1
    É simples @rbz, refatore o seu código todo tirando jQuery :)
    – DaviAragao
    Commented 14/03/2019 às 13:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .