加数字并为结果创建一个div [英] Adding numbers and create a div for the result

问题描述

我具有以下HTML结构(无尽)...

I have the following HTML structure (endless) ...

<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的分数.每个包装器的结果都应显示在称为结果"的新div中.该div也应该由脚本创建.

... and I want, that the script adding score 1 till 5 for every wrapper. The result of every wrapper should displayed in a new div, called "result". This div should be created by the script too.

它看起来像这样:

<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?

谁能帮我吗?

My problems:
a) How can I adding the scores for every wrapper correct, if the class name would be always the same (wrapper, content, score)?
b) How can I create a div with the result for every wrapper automatically?

Can anyone help me?

推荐答案

遍历每个.content元素，然后附加.score元素的总和.

Iterate over each .content element and then append the sum of the .score elements.

您可以通过嵌套 .each()循环:

You can achieve this by nesting .each() loops:

此处的示例

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

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

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

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

.result {
    color: #f00;
}

<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>

此处示例

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);
});

这篇关于加数字并为结果创建一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！