如何获得父div中子代的总和？

Question

I'm attempting to add the sum of children within a parent div, but haven't been able to limit the scope of the math to children of a single parent.

I'm starting with an array:

[
  {
    "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"
  }
]

Then I write the contents of the page into html with javascript

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

The problem lies in the findTotals function. I want to limit the sum to the .cost values inside each .container div. (currently the total comes to 1900, when the totals are 1000, 600, 300. (all the .cost values on the page are being added, when I'm really trying to iterate over one .container div at a time, executing the function within the scope of the parent (.container) div.

You can see the totals are broken. My next goal will be to compare the sums to the total value. If they don't match, I'll highlight the broken total value, so the query generating it can be fixed.

Thank you for you for your guidance.

Answer 1

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

Answer 2

The issue is in your selector and DOM construction: $(this).children. Children looks for all the DOM elements that are children, not all descendants. .cost is not a child element of .container, it is a child element of p. If you replace it with .find, you will get the results.

 function findTotals(container) { $.each(containers, function() { var sum = 0; $(this).find(".cost").each(function() { var val = $.trim($(this).text()); if (val) { val = parseFloat(val.replace(/^\\$/, "")); sum += !isNaN(val) ? val : 0; } }); console.log(sum); }); }; 

Here's a link to a fiddle that works as well - https://jsfiddle.net/z5oug908/1/

Updated Answer

So the more I thought about this, the more I wondered if you really need to be searching the DOM to do a sum of the totals. You have all the data you need in an array already. We can use map, filter and reduce to calculate the totals before you ever render them like this:

 function calculateTotals(rows) { return rows.map(row => { const rowTotal = Object.keys(row).filter(key => { const match = key.search(/(price)/gi) return match !== -1; }).reduce((pre, cur) => { let val = row[cur]; val = parseFloat(val.replace(/^\\$/, "")); if (val) { return val + pre; } return pre; }, 0); row["total"] = rowTotal; return row; }) } 

A completed example that should work:

 function calculateTotals(rows) { return rows.map(row => { const rowTotal = Object.keys(row).filter(key => { const match = key.search(/(price)/gi) return match !== -1; }).reduce((pre, cur) => { let val = row[cur]; val = parseFloat(val.replace(/^\\$/, "")); if (val) { return val + pre; } return pre; }, 0); row["total"] = rowTotal; return row; }) } function admitTemplate(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>'; }; function buildRows(rows) { var allRows = ""; rows.forEach(function(row) { allRows = allRows + admitTemplate(row); }) document.getElementById('rowHolder').innerHTML = allRows; } fetch('queryExport.json') .then(response => { if (response.ok) { return response.json() } else { return Promise.reject('something went wrong!') } }) .then(calculateTotals) .then(buildRows);