JQuery 在每个嵌套部分内收集值的总和

Question

我正在创建一个包含父任务和子任务的任务列表。它们以有序列表的形式排列，并且嵌套了很多层，因此父任务内部也可以有子任务和父任务。

例子：

    <div class="item-list">
    <ol>
     <li class="parent">
        <div class="title">Im a task</div>
        <div class="totalhours">total child hours here please</div>
        <ol>
          <li>
            <div class="title">Im a task</div>
            <div class="hours">5</div>
          </li>
          <li>
            <div class="title">Im a task</div>
            <div class="hours">10</div>
          </li>
          <li class="parent">
           <div class="title">Im a task</div>
           <div class="totalhours">total child hours here please</div>
           <ol>
             <li>
               <div class="title">Im a task</div>
               <div class="hours">5</div>
             </li>
             <li>
               <div class="title">Im a task</div>
               <div class="hours">10</div>
             </li>
          </ol>
         </li>
        </ol>
     </li>
     <li>Another task thats not a parent on this level</li>
    </ol>
    </div>

所以我希望每个级别都有所有嵌套项。因此，最顶层的父任务包括所有嵌套小时 div 的小时数，然后如果您向下钻取它，每个嵌套父级对其所有嵌套小时数都执行相同的操作，依此类推。

这是我目前正在使用的，它只是计算每个小时的 div，而不是只嵌套并在任何地方放置相同的数字。

    var totalest = $('li.parent .totalhours');

    var sum = 0;

    $("li .hours").each(function() {
        var val = $.trim( $(this).text() );

        if ( val ) {
            val = parseFloat( val.replace( /^\$/, "" ) );

            sum += !isNaN( val ) ? val : 0;
        }

        totalest.html(sum); 
    });

我希望这个结果

• 我是家长任务 30 小时
  • 我的任务是 5 小时
  • 我的任务是 10 小时
  • 我是家长任务 15 小时
    • 我的任务是 5 小时
    • 我的任务是 10 小时
• 我是另一个家长任务 20 小时
  • 我的任务是 5 小时
  • 我的任务是 5 小时
  • 我是家长任务 10 小时
    • 我的任务是 5 小时
    • 我的任务是 5 小时

Answer 1

遍历每个父级并仅向该父级添加小时数。

$(".parent").each(function() {
  var sum = 0;
  $(".hours", this).each(function() {
    var val = $.trim( $(this).text() );

    if ( val ) {
      val = parseFloat( val.replace( /^\$/, "" ) );

      sum += !isNaN( val ) ? val : 0;
    }

  });
  $(this).find('.totalhours').html(sum); 
});

http://jsfiddle.net/qqhD6/

Answer 2

诀窍是将其范围限定为每个父母。

$('.parent').each(function(){
    var parent = $(this),
        total = parent.find('.totalHours'),
        sum = 0;

    parent.find('.hours').each(function(){
        var hours = $(this),
            text = $.trim(hours.text()),
            value = parseFloat(value);

        sum += !isNaN(value)?value:0;
    });

    total.html(sum);
});