CODEWITHSUNDEEP
javascriptjquery
Pepe
Pepe

Reputation: 1002

Adding numbers and create a div for the result

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>

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

It would look like this::

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

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?

Upvotes: 2

Views: 1343

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240968

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

You can achieve this by nesting .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>');
});


$('.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>

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

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You can use jQuery's 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>

Upvotes: 0

Related Questions