配列を作って、合計を別の場所に表示する

同じIDだけど違う場所にある数値を、それぞれ合計して表示する。











sample

See the Pen 配列を作って、合計を別の場所に表示する by takapen (@takapen) on CodePen.

html

test
test
test

1
21
00

jQuery

$(function(){

  function isItemNumSum(){
    var arr = [];
    var arrNum = [];
    $('.bbb').each(function() {
      var itemId = $(this).data('itemid');

      var arrNum = $(this).find('span').map(function(){//配列に入れる
        return Number( $(this).text() );//Numberでテキストを数に変換
      }).get();

      //reduceで配列を合計しようとしたらエラーになってしまって解消の仕方がわからなかったので、下記forEachで合計した
      //var sum = arr.reduce((a,x) => a+=x);//配列から合計数を出す（エラーになってしまった）
      
      //bbbの中のspanの数を合計する処理
      var sumFn  = function(arr) {
        var sum = 0;
        arr.forEach(function(elm) {
            sum += elm;
        });
        return sum;
      };

      arr.push( {id : itemId, num : sumFn(arrNum)} );//配列に追加

    });

    for(i in arr){//bbbで作った配列をまわす
      $('.aaa').each(function(){
        if($(this).data('itemid') == arr[i].id){//同じIDの時にbbbのspanの合計値を入れる
          if(arr[i].num != '0'){
            $(this).find('.sum').text(arr[i].num);
            $(this).find('.sum').show();
          } else {
            $(this).find('.sum').hide();//0の時は非表示
          }
        }
      });
    }


    if( $('.sum').text() == '0' ){
      $('.sum').css('display','none');
    }


  }isItemNumSum();//実行

});