Question

我有这段代码

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));

        }

而且我没有得到预期的结果 - totalItems的出现是180+，其余的都是NaN。我怀疑它在哪里使用var product = $(li);或者可能是循环本身的表达式。无论哪种方式 - 我需要遍历标记为<li>

的<ul>中的#productList项

Answer 1

您需要使用.each：

var listItems = $("#productList li");
listItems.each(function(idx, li) {
    var product = $(li);

    // and the rest of your code
});

这是循环jQuery选择的正确方法。

在现代Javascript中，您还可以使用for .. of循环：

var listItems = $("#productList li");
for (let li of listItems) {
    let product = $(li);
}

但请注意，较旧的浏览器不支持此语法，并且您可能最好使用上面的jQuery语法。

Answer 2

您可以使用each：

$('#productList li').each(function(i, li) {
  var $product = $(li);  
  // your code goes here
});

话虽如此 - 您确定要每次更新值为+1吗？难道你不能找到计数然后根据它设置值吗？

Answer 3

试试这个：

listItems = $("#productList").find("li").each(function(){
   var product = $(this);
   // rest of code.
});

Answer 4

要获得更明确的答案，您需要发布一些标记。你可以简化你的jQuery，如下所示：

$("#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
}

Answer 5

试试这段代码。通过使用父＆gt;子选择器“#productList li”，它应该找到所有li元素。然后，您可以使用each（）方法遍历结果对象，该方法只会更改已找到的li元素。

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));

    });

Answer 6

要在没有jQuery .each()的情况下解决这个问题，你必须像这样解决你的代码：

var listItems = $("#productList").find("li");
var ind, len, product;

for ( ind = 0, len = listItems.length; ind < len; ind++ ) {
    product = $(listItems[ind]);

    // ...
}

原始代码中的错误：

for ... in也将循环遍历所有继承的属性;即，您还将获得由jQuery定义的所有函数的列表。
循环变量li不是列表项，而是列表项的索引。在这种情况下，索引是正常的数组索引（即整数）

基本上你保存使用.each()因为它更舒服，但特别是当你循环更大的数组时，这个答案中的代码会快得多。

对于.each()的其他替代方法，您可以查看此效果比较： http://jsperf.com/browser-diet-jquery-each-vs-for-loop

Answer 7

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
   <script>
      $(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("<tr><td></td><td>"+name+"</td><td>"+amount+"</td><td>"+gst+"</td><td>"+total+"</td></tr>");
       $("#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);
        });

    });
   });

   </script>

     <style>
           #formdata{
                      float:left;
                      width:400px;
                    }

     </style>
  </head>


  <body>  

       <form id="formdata">  

                           <span>Product Name</span>
                           <input type="text" id="name">
                            <br>

                           <span>Product Amount</span>
                           <input type="text" id="number">
                           <br>
                           <br>
                           <center><button type="submit" class="adddata">Add</button></center>
       </form>
       <br>
       <br>

      <table class="myTable" border="1px" width="300px">
      <thead><th>s.no</th><th>Name</th><th>Amount</th><th>Gst</th><th>NetTotal</th></thead>

      <tbody></tbody>

      <tfoot>
             <tr>
                 <td></td>
                 <td></td>
                 <td></td>
                 <td class="total"></td>
                 <td class="total"></td>
             </tr>

      </tfoot>
      </table>

   </body>

使用jquery循环遍历列表项

7 个答案: