添加数字并为结果创建div

我有以下HTML结构（无尽的）…

 
 
1
 
2.5
 
1.5
 
1.5
 
2
 
  

…我希望，脚本为每个包装器添加1到5的分数。 每个包装器的结果应显示在一个名为“result”的新div中。 这个div也应该由脚本创建。

它看起来像这样::

 
 
 
1
 
2.5
 
1.5
 
1.5
 
2
 
8.5
 <-- created by script 
 
 
 
 
2.5
 
3.5
 
4
 
1.5
 
1
 
12.5
 <-- created by script 
 
 
 
 
4
 
1.5
 
2.5
 
2
 
1.5
 
11.5
 <-- created by script 
  

我的问题：
a）如果类名总是相同的（包装器，内容，分数），如何为每个包装器添加正确的分数？
b）如何自动为每个包装器创建一个div结果？

谁能帮我？

Answer 1

迭代每个.content元素，然后追加.score元素的总和。

你可以通过嵌套.each()循环来实现这一点：

这里的例子

 $('.wrapper .content').each(function () { var sum = 0; $(this).find('.score').each(function () { sum += Number($(this).text(), 10); }); $(this).append('
' + sum + '
'); }); 

 $('.wrapper .content').each(function () { var sum = 0; $(this).find('.score').each(function () { sum += Number($(this).text(), 10); }); $(this).append('
' + sum + '
'); }); 

 .result { color: #f00; } 

  
 
 
1
 
2.5
 
1.5
 
1.5
 
2
 
 
 
 
 
2.5
 
3.5
 
4
 
1.5
 
1
 
 
 
 
 
4
 
1.5
 
2.5
 
2
 
1.5
 
  

Answer 2

 $(document).ready(function(){ $('.content').each(function(){ var total = 0; $(this).find('> .score').each(function(){ total += parseFloat($(this).text()); }); $(this).append('
' + total + '
'); }); }); 

工作演示

Answer 3

你可以使用jQuery的DOM：

 var finalVal = 0; $(function () { $(".content").each(function () { finalVal = 0; $(this).find(".score").each(function () { finalVal += Number($(this).text()); }); $(this).append('
' + finalVal + '
'); finalVal = 0; }); }); 

 .result {background: #99f;} 

  
 
 
1
 
2.5
 
1.5
 
1.5
 
2
 
 
 
 
 
2.5
 
3.5
 
4
 
1.5
 
1
 
 
 
 
 
4
 
1.5
 
2.5
 
2
 
1.5