添加数字并为结果创建div

Question

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

<div class="wrapper">
    <div class="content">
        <div class="score">1</div>
        <div class="score">2.5</div>
        <div class="score">1.5</div>
        <div class="score">1.5</div>
        <div class="score">2</div>
   </div>
</div>

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

看起来像这样::

<div class="wrapper">
    <div class="content">
        <div class="score">1</div>
        <div class="score">2.5</div>
        <div class="score">1.5</div>
        <div class="score">1.5</div>
        <div class="score">2</div>
        <div class="result">8.5</div> <-- created by script
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">2.5</div>
        <div class="score">3.5</div>
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">1</div>
        <div class="result">12.5</div> <-- created by script
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">2.5</div>
        <div class="score">2</div>
        <div class="score">1.5</div>
        <div class="result">11.5</div> <-- created by script
    </div>
</div>

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

任何人都可以帮助我吗？

Answer 1

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

您可以通过嵌套.each() loops：

来实现这一目标

Example Here

$('.wrapper .content').each(function () {
    var sum = 0;

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

    $(this).append('<div class="result">' + sum + '</div>');
});

＆＃13;

＆＃13;

$('.wrapper .content').each(function () {
    var sum = 0;
    
    $(this).find('.score').each(function () {
        sum += Number($(this).text(), 10);
    });
    
    $(this).append('<div class="result">' + sum + '</div>');
});

＆＃13;

.result {
    color: #f00;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="content">
        <div class="score">1</div>
        <div class="score">2.5</div>
        <div class="score">1.5</div>
        <div class="score">1.5</div>
        <div class="score">2</div>
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">2.5</div>
        <div class="score">3.5</div>
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">1</div>
    </div>
</div>

<div class="wrapper">
    <div class="content">
        <div class="score">4</div>
        <div class="score">1.5</div>
        <div class="score">2.5</div>
        <div class="score">2</div>
        <div class="score">1.5</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

没有jQuery：

Example Here

var content = document.querySelectorAll('.wrapper .content');
Array.prototype.forEach.call(content, function (el) {
    var score = el.querySelectorAll('.score'),
        resultElement = document.createElement('div'),
        sum = 0;

    Array.prototype.forEach.call(score, function (el) {
        sum += Number(el.textContent, 10);
    });

    resultElement.className += 'result';
    resultElement.textContent = sum;
    el.appendChild(resultElement);
});

Answer 2

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

Working Demo

Answer 3

您可以使用jQuery的DOM each：

var finalVal = 0;
$(function () {
  $(".content").each(function () {
    finalVal = 0;
    $(this).find(".score").each(function () {
      finalVal += Number($(this).text());
    });
    $(this).append('<div class="result">' + finalVal + '</div>');
    finalVal = 0;
  });
});

.result {background: #99f;}

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="wrapper">
  <div class="content">
    <div class="score">1</div>
    <div class="score">2.5</div>
    <div class="score">1.5</div>
    <div class="score">1.5</div>
    <div class="score">2</div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <div class="score">2.5</div>
    <div class="score">3.5</div>
    <div class="score">4</div>
    <div class="score">1.5</div>
    <div class="score">1</div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <div class="score">4</div>
    <div class="score">1.5</div>
    <div class="score">2.5</div>
    <div class="score">2</div>
    <div class="score">1.5</div>
  </div>
</div>