如何遍历js元素

Question

I have this java class:我有这个 java class：

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

Objects of this class are in List:此 class 的对象在列表中：

List<ProductBucketDto>()

I am adding this element to the page and want to display the sum of the quantity parameters for the entire List.我正在将此元素添加到页面中，并希望显示整个列表的数量参数的总和。 Similar Java code:类似Java代码：

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

I am trying to do this now, but my attempts fail because I don't know much Js.我现在正在尝试这样做，但是我的尝试失败了，因为我不太了解 Js。 The logic is as follows: there is a js function, we pass this array there, go around it and get the quantityInBucket elements from it.逻辑如下：有一个js function，我们把这个数组传递到那里，go 围绕它，并从中获取quantityInBucket元素。 We sum them up and display them in the span we need.我们将它们汇总并显示在我们需要的范围内。

With jquery mo code looks like this:使用 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);
  } 
})

my html code:我的 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 I receive from the server side and pass to the form as an attribute myArray 我从服务器端接收并作为属性传递给表单

EDIT:编辑：
Im put my array to html like this我像这样把我的阵列放到 html

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

My js code looks like this now:我的 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);
    }
})

Im call my function from html like this:我像这样从 html 调用我的 function ：

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

but it doesn't work.但它不起作用。 I do not know what it is connected with我不知道它与什么有关

Answer 1

If you are ok using a index to iterate through the array.如果您可以使用索引来遍历数组。 Then the following will carry out the sum.那么下面会进行求和。

$(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);
  } 
})

An alternative is to use reduce.另一种方法是使用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);
  } 
})

If you want to call from the shopping cart icon being clicked then replace:如果您想从被点击的购物车图标中调用，请替换：

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

with和

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

If it is something you want to call when the element loads then you should be able to replace onclick with onload.如果您想在元素加载时调用它，那么您应该能够用 onload 替换 onclick。

如何遍历js元素

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-01-22 17:06:02

如何遍历js元素

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-01-22 17:06:02

解决方案1
0 已采纳 2021-01-22 17:06:02