Iteration in javascript only returns the first element

Question

I have the following code snippet

$("#personalizacoesOpcionais")
      .find(".qtdPersonalizacao")
      .each(function (n, t) {
         var i = {};
         i.IdProdutoIngrediente = parseInt($(t).attr("data-id"));
         i.Qtde = parseFloat($(t).text());            
         r[n] = i
       });

In the html there are several divs personalizacoesOpcionais and each one with numerous elements qtdPersonalizacao.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.

If there are several divs with the id of `personalizacoesOpcionais`, no wonder why it does not return more than one since ids are UNIQUE — epascarello, Oct 05 '20 at 20:17
@epascarello Thank you for paying attention to this detail. I had the problem due to an error in the placement of divs. Worked perfectly! — Saulo Pacífico, Oct 05 '20 at 20:25

score 2 · Accepted Answer · answered Oct 05 '20 at 20:24

However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.

Ids are supposed to be unique within a document and jQuery will just returns the first matching element.

The recommended solution would be to use a class instead of an id for personalizacoesOpcionais.

If this is not possible, for example if you don't control the code that generate the markup, a workaround would be to use $("div[id=personalizacoesOpcionais]") instead of $("#personalizacoesOpcionais")

Thank you for paying attention to this detail. I had the problem due to an error in the placement of divs. Worked perfectly! — Saulo Pacífico, Oct 05 '20 at 20:25

Iteration in javascript only returns the first element

1 Answers1