Как я могу получить сумму детей в родительском div?

Question

Я пытаюсь добавить сумму дочерних элементов в родительский 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"
  }
]

Затем я записываю содержимое страницы в html с помощью 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));

Проблема заключается в findTotalsфункция.Я хочу ограничить сумму значениями .cost внутри каждого div .container.(в настоящее время общее количество составляет 1900, когда итоговые значения равны 1000, 600, 300. (Все значения .cost на странице добавляются, когда я действительно пытаюсь перебрать по одному div .container за раз, выполняяфункция в рамках родительского (.container) div.

Вы можете увидеть, что итоги разбиты. Моей следующей целью будет сравнение сумм с итоговым значением. Если они не совпадают, я 'Выделите сломанное итоговое значение, чтобы его можно было исправить.

Спасибо за руководство.

Answer 1

Проблема в вашем селекторе и конструкции DOM: $ (this) .children. Children ищет все элементы DOM, которые являются детьми, а не всеми потомками. .cost не является дочерним элементом .container, это дочерний элемент p. Если вы замените его на .find, вы получите результаты.

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

Вот ссылка на скрипку, которая также работает - https://jsfiddle.net/z5oug908/1/

Обновленный ответ

Таким образом, чем больше я думал об этом, тем больше я задавался вопросом, действительно ли вам нужно искать DOM, чтобы получить сумму итогов. У вас уже есть все необходимые данные в массиве. Мы можем использовать карту, фильтр и уменьшение для вычисления итогов, прежде чем вы когда-либо сделаете их так:

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

Answer 2

Вы никогда не сбрасываете значение sum, поэтому каждая итерация цикла добавляет существующее значение вместо того, чтобы быть независимым.