0

Em um formulário HTML criei um campo input[type='text'] com o atributo name='input[][nome]' e este campo é criados na DOM dinamicamente sob demanda do usuário, se o usuário criar 3 novos inputs o retorno do atributo name no console.log seria:

input[0][nome]

input[1][nome]

input[2][nome]

Estou usando Jquery para facilitar o tempo de desenvolvimento e uma boa parte está em Javascript, fiz um depurador que exibe no console.log qual input está recebendo o foco e com o código abaixo é que me retorna o atributo name.

<input type='text' name='input[][nome]' class='add-item'/>

<script>
$('.add-item).on('click',function(){
    var nomeInput = $(this).attr('name');
    console.log(nomeInput); // retorna input[0][nome]
})
</script>

Dentro do código javascript gostaria de checar qual é o valor da chave atual, no caso acima é 0, mas é possível o código identificar isso sem mudança estrutural dessa função, apenas incrementando a mesma?

0

1 Resposta 1

2

Acho que você está equivocado. O seu código não retorna o índice do input dentro dos colchetes, ele retorna o valor do atributo como ele está no HTML. Veja:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' name='input[][nome]' class='add-item'/>

<script>
$('.add-item').on('click',function(){
    var nomeInput = $(this).attr('name');
    console.log(nomeInput); // retorna input[][nome]
})
</script>

Agora, se você quer saber qual o índice do elemento dentro de uma coleção com a mesma class, você pode usar o método .index():

$('.add-item').on('click',function(){
    var indice = $(this).index();
    console.log("Índice do input:", indice, ". Deveria ser:", indice-1); // retorna o índice do elemento
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' name='input[][nome]' class='add-item'/>
<input type='text' name='input[][nome]' class='add-item'/>
<input type='text' name='input[][nome]' class='add-item'/>

Não sei porque cargas d'água no snippet daqui o índice retorna um número a mais: 1, 2 e 3. Teste num arquivo .html no seu navegador que irá retornar corretamente: 0, 1 e 2.

Neste JSFIDDLE funciona corretamente.

1
  • 1
    resolveu geral, eu havia mapeado tudo para conseguir o índice, desconhecia .index(), hoje testei .map() e me retornou diferente, deveria reportar a divergência do snippet ao SO. Obrigado cordial.
    – ElvisP
    Commented 12/03/2020 às 4:51

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 .