Looping through list items with jquery

Question

I have this block of code  listItems       productList   find  li             for  var li in listItems                var product     li               var productid   product children   productId   val                var productPrice   product find   productPrice   val                var productMSRP   product find   productMSRP   val                 totalItemsHidden val parseInt totalItemsHidden val    10    1               subtotalHidden val parseFloat subtotalHidden val      parseFloat productMSRP                savingsHidden val parseFloat savingsHidden val      parseFloat productMSRP - productPrice                totalHidden val parseFloat totalHidden val      parseFloat productPrice                 and I m not getting the desired results - totalItems is coming out as 180  and the rest all NaN  I suspect its where i use var product     li   or perhaps with the expression on the loop itself  Either way - I need to loop through the  lt li gt  items in the  lt ul gt  labelled  productList

User · Answer

Try this code  By using the parent child selector   productList li  it should find all li elements  Then  you can iterate through the result object using the each   method which will only alter li elements that have been found   listItems       productList li   each function             var product     this           var productid   product children   productId   val            var productPrice   product find   productPrice   val            var productMSRP   product find   productMSRP   val             totalItemsHidden val parseInt totalItemsHidden val    10    1           subtotalHidden val parseFloat subtotalHidden val      parseFloat productMSRP            savingsHidden val parseFloat savingsHidden val      parseFloat productMSRP - productPrice            totalHidden val parseFloat totalHidden val      parseFloat productPrice

User · Answer

To solve this without jQuery  each   you d have to fix your code like this   var listItems       productList   find  li    var ind  len  product   for   ind   0  len   listItems length  ind  lt  len  ind           product     listItems ind                    Bugs in your original code    for     in will also loop through all inherited properties  i e  you will also get a list of all functions that are defined by jQuery  The loop variable li is not the list item  but the index to the list item  In that case the index is a normal array index  i e  an integer    Basically you are save to use  each   as it is more comfortable  but espacially when you are looping bigger arrays the code in this answer will be much faster   For other alternatives to  each   you can check out this performance comparison  http   jsperf com browser-diet-jquery-each-vs-for-loop

User · Answer

You need to use  each   var listItems       productList li    listItems each function idx  li        var product     li           and the rest of your code       This is the correct way to loop through a jQuery selection     In modern Javascript you can also use a for    of loop   var listItems       productList li    for  let li of listItems        let product     li       Be aware  however  that older browsers will not support this syntax  and you may well be better off with the jQuery syntax above

User · Answer

You can use each for this       productList li   each function i  li      var  product     li          your code goes here       That being said - are you sure you want to be updating the values to be  1 each time  Couldn t you just find the count and then set the values based on that

User · Answer

Try this   listItems       productList   find  li   each function       var product     this         rest of code

User · Answer

lt script src  https   cdnjs cloudflare com ajax libs jquery 3 4 0 jquery min js  gt  lt  script gt      lt script gt          document  ready function              form   submit function e             e preventDefault           var name       name   val           var amount      number   val           var gst  amount   0 18              gst Math round gst           var total parseInt amount  parseInt gst              myTable tbody   append   lt tr gt  lt td gt  lt  td gt  lt td gt   name   lt  td gt  lt td gt   amount   lt  td gt  lt td gt   gst   lt  td gt  lt td gt   total   lt  td gt  lt  tr gt                name   val                 number   val                  myTable   find  tbody   find  tr   each function i            this  closest  tr   find  td first-child   text i 1                           formdata   on  submit     myTable   function                          var sum   0                 myTable tbody tr   each function                          var getvalue     this  val                        if    isNumeric getvalue                                                  sum    parseFloat getvalue                                                                                               total   text sum                                    lt  script gt         lt style gt              formdata                        float left                        width 400px                               lt  style gt     lt  head gt       lt body gt             lt form id  formdata  gt                                 lt span gt Product Name lt  span gt                              lt input type  text  id  name  gt                               lt br gt                               lt span gt Product Amount lt  span gt                              lt input type  text  id  number  gt                              lt br gt                              lt br gt                              lt center gt  lt button type  submit  class  adddata  gt Add lt  button gt  lt  center gt          lt  form gt          lt br gt          lt br gt          lt table class  myTable  border  1px  width  300px  gt         lt thead gt  lt th gt s no lt  th gt  lt th gt Name lt  th gt  lt th gt Amount lt  th gt  lt th gt Gst lt  th gt  lt th gt NetTotal lt  th gt  lt  thead gt          lt tbody gt  lt  tbody gt          lt tfoot gt                lt tr gt                    lt td gt  lt  td gt                    lt td gt  lt  td gt                    lt td gt  lt  td gt                    lt td class  total  gt  lt  td gt                    lt td class  total  gt  lt  td gt                lt  tr gt          lt  tfoot gt         lt  table gt       lt  body gt

User · Answer

For a more definitive answer  you ll need to post some of your markup  You can simplify your jQuery quite a bit  like the following       productList li   each function         var product     this       var productid       productId   product  val        var productPrice       productPrice   product  val        var productMSRP       productMSRP   product  val            the rest remains unchanged

[javascript] Looping through list items with jquery

Examples related to javascript

Examples related to jquery