时间戳

首页 > 解决方案 > 如何获得父 div 中子元素的总和？

javascript - 如何获得父 div 中子元素的总和？

问题描述

我正在尝试在父 div 中添加子元素的总和，但无法将数学范围限制为单亲的子元素。

我从一个数组开始：

[
  {
    "item1-name": "item1",
    "item1-price": "$100.00",
    "item2-name": "item2",
    "item2-price": "$200.00",
    "item3-name": "item3",
    "item3-price": "300.00",
    "item4-name": "item4",
    "item4-price": "$400.00",
    "total": "$1,000.00"
  },
  {
    "item1-name": "item1",
    "item1-price": "$100.00",
    "item2-name": "item2",
    "item2-price": "$200.00",
    "item3-name": "item3",
    "item3-price": "300.00",
    "item4-name": "",
    "item4-price": "",
    "total": "$0.00"
  },
  {
    "item1-name": "item1",
    "item1-price": "$100.00",
    "item2-name": "item2",
    "item2-price": "$200.00",
    "item3-name": "",
    "item3-price": "",
    "item4-name": "",
    "item4-price": "",
    "total": "0"
  }
]

然后我用javascript将页面内容写入html

function values(row){
  return '<div class="container">' +
    '<p>' + row["item1-name"] + '<span class="value  cost">' +  
    row["item1-price"] + '</span></p>' +
    '<p>' + row["item2-name"] + '<span class="value  cost">' + 
    row["item2-price"] + '</span></p>' +
    '<p>' + row["item3-name"] + '<span class="value  cost">' + 
    row["item3-price"] + '</span></p>' +
    '<p>' + row["item4-name"] + '<span class="value  cost">' + 
    row["item4-price"] + '</span></p>' +
    '<h4>Total' + '<span class="value  total">' + row["total"] + 
    '</span></h4>' +
  '</div>';
 };

 var containers = document.getElementsByClassName("container");

 function findTotals(container){
 $.each(containers, function(){
    var sum = 0;

     $(this).children(".cost").each(function() {
         var val = $.trim( $(this).text() );

         if ( val ) {
             val = parseFloat( val.replace( /^\$/, "" ) );
             sum += !isNaN( val ) ? val : 0;
         }
      });
      alert(sum);
   });
  };

function buildRows(rows){
   var allRows = "";
   rows.forEach(function(row){
   allRows = allRows + admitTemplate(row);
   })

   document.getElementById('rowHolder').innerHTML = allRows;
   findTotals();
}

fetch('queryExport.json')
  .then(response => {
    if (response.ok){
    return response.json()
  } else {
     return Promise.reject('something went wrong!')
  }
})
.then(rows => {
  buildRows(rows);
})

.catch(error => console.log('error is', error));

问题在于 findTotals 函数。我想将总和限制为每个 .container div 内的 .cost 值。（目前总数为 1900，当总数为 1000、600、300 时。（页面上的所有 .cost 值都被添加，当我真的试图一次迭代一个 .container div 时，执行父 (.container) div 范围内的函数。

你可以看到总数被打破了。我的下一个目标是将总和与总值进行比较。如果它们不匹配，我将突出显示损坏的总值，以便可以修复生成它的查询。

感谢您的指导。

标签： javascriptsum

解决方案

您永远不会重置 的值sum，因此循环的每次迭代都会添加到现有值，而不是独立的。

推荐阅读