如何遍历js元素答案

【问题标题】：How to iterate over js elements如何遍历js元素
【发布时间】：2021-04-27 04:16:15
【问题描述】：

我有这个 java 类：

public class ProductBucketDto {
    ProductDto productDto;
    int quantityInBucket;
    boolean available;
}

这个类的对象在List中：

List<ProductBucketDto>()

我正在将这个元素添加到页面中，并希望显示整个 List 的数量参数的总和。类似的Java代码：

int quantity = 0;
        for(ProductBucketDto productBucketDto : bucket){
            quantity += productBucketDto.getQuantityInBucket();
        }
        System.out.println(quantity);

我现在正在尝试这样做，但是我的尝试失败了，因为我不太了解 Js。逻辑如下：有一个js函数，我们把这个数组传进去，绕过它，从中获取quantityInBucket元素。我们将它们汇总并显示在我们需要的范围内。

使用 jquery mo 代码如下：

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    result.each(function(){
      totalQantity += $(this);
    })
    quantitySpan.text(totalQantity);
  } 
})

我的html代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="./script.js"></script>
</head>
<body>
    <span id="qantity"><script>caltQuantity(myArray);</script></span>
</body>

myArray 我从服务器端接收并作为属性传递给表单

编辑：
我像这样把我的数组放到html中

<input type="hidden" name="bucketCount" th:value="${session.bucket}" />

我的 js 代码现在是这样的：

$(function(){
    let quantitySpan = $('#quantity');
    let totalQantity = 0;
    function caltQuantity(){
        let array = $('#bucketCount');
        let result = array.map(({ quantityInBucket }) => quantityInBucket);
        var totalQuantity = 0;
        for(var i=0;i<result.length;i++){
            totalQantity += result[i];
        }
        quantitySpan.text(totalQantity);
    }
})

我像这样从 html 调用我的函数：

Shopping cart <span id="quantity" class="badge badge-light"><script>caltQuantity()</script></span>

但它不起作用。不知道跟什么有关系

【问题讨论】：

你试过使用 ajax 吗？页面调用 ajax 的加载从服务器获取总数并显示在您的输入中。

标签： javascript java html jquery

【解决方案1】：

如果您可以使用索引来遍历数组。那么下面会进行求和。

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    var totalQuantity = 0;
    for(var i=0;i<result.length;i++){
      totalQantity += result[i];
    }
    quantitySpan.text(totalQantity);
  } 
})

另一种方法是使用reduce。

$(function(){
  let quantitySpan = $('qantity');
  let totalQantity = 0;
  function caltQuantity(array){
    let result = objArray.map(array => array.quantityInBucket);
    var totalQantity = result.reduce((a, b) => a + b, 0);
    quantitySpan.text(totalQantity);
  } 
})

如果你想从被点击的购物车图标调用，那么替换：

Shopping cart <span id="quantity" class="badge badge-light"><script>caltQuantity()</script></span>

与

Shopping cart <span id="quantity" class="badge badge-light" onclick="callQuantity();"></span>

如果您想在元素加载时调用它，那么您应该能够将 onclick 替换为 onload。

【讨论】：

我编辑了我的问题。看看我在哪里使用你的代码所做的更改
可能也值得检查拼写错误，不确定是否应该将 caltQuantity 改为 callQuantity
我希望在我的页面加载时计数的元素立即出现在此处