我正在创建一个包含父任务和子任务的任务列表。它们以有序列表的形式排列,并且嵌套了很多层,因此父任务内部也可以有子任务和父任务。
例子:
<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 小时