Guide on calculating the total sum of numbers from multiple selected elements based on class within a div that has a designated id

Question

Guide on calculating the total sum of numbers from multiple selected elements based on class within a div that has a designated id

https://i.sstatic.net/uyjPk.pngI'm currently working on a task that involves summing up the number of listeners from various servers. These values are stored within a div with the id="channel1", and each number of listeners is located in a span element with the class stats. My goal is to collect all these values with the class 'stats' inside the div with the id 'channel1'.

Here is the HTML and jQuery code snippet:

<div class="panel-body" id="channel1">
                 <div id="kanali1-a">
                    <h4>Server 1*</h4>
                    <span> IP: 85.93.88.146 Port: 8000</span>
                    Currently Listening: <span class="stats badge"></span><br>
                    <span>This is the main server where the transmission takes place.</span> 
                 </div>

                 <div id="kanali1-b">
                    <h4>Server 2</h4>
                    <span> IP: 85.93.88.146 Port: 8004</span>
                    Currently Listening: <span class="stats badge">10</span><br>
                    <span></span> 
                 </div>

               (Rest of the server details skipped for brevity)
              
               </div>

jQuery Code:

var statsCh1 = $('#channel1 .stats').text();
   var resCh1 = 0;

    for (var i=0; i<statsCh1.length; i++){
       resCh1 += statsCh1[i] << 0;
       //console.log(statsCh1[i]);
    }

   $('#kanal1Total').text(resCh1);

javascript jquery html css

Answer 1

Answer №1

Perhaps you could try this approach:

let total = 0;
$('.stats').each(function () {
    total += (+ $(this).text());
});
$('#totalValue').text(total);

Answer 2

Perhaps you could try this approach:

let total = 0;
$('.stats').each(function () {
    total += (+ $(this).text());
});
$('#totalValue').text(total);

Answer 3

Answer №2

When you call $('#channel1 .stats').text(); on multiple elements, it will simply concatenate a list of strings together resulting in something like "01010101010".

To handle this correctly, you should iterate over each element individually. Here's a way to do this using the map and reduce functions:

// Iterate over each .stats element...
var values = $('#channel1 .stats').map(function() {
  // Ensure that the text is parsed as a Number...
  return parseInt($(this).text(), 10) || 0;
}).get(); // Converts the elements to a native array
// Now sum up the values obtained above
var sum = values.reduce(function(prev, curr) {
    return prev + curr;
}, 0);
console.log(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body" id="channel1">
    <div id="kanali1-a">
        <h4>Server 1*</h4>
        <span> IP: 85.93.88.146 Port: 8000</span> Listening: <span class="stats badge"></span>
        <br>
        <span>This is the main server for broadcasting</span>
    </div>

    <div id="kanali1-b">
        <h4>Server 2</h4>
        <span> IP: 85.93.88.146 Port: 8004</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-c">
        <h4>Server 3</h4>
        <span> IP: 85.93.88.146 Port: 8006</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-d">
        <h4>Server 4</h4>
        <span> IP: radio-pendimi.com (all-inkl) Port: 8000</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-e">
        <h4>Server 5</h4>
        <span> IP: 217.172.180.29 Port: 8000</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-f">
        <h4>Server 6</h4>
        <span> IP: 217.172.180.29 Port: 8004</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>
</div>

Answer 4

When you call $('#channel1 .stats').text(); on multiple elements, it will simply concatenate a list of strings together resulting in something like "01010101010".

To handle this correctly, you should iterate over each element individually. Here's a way to do this using the map and reduce functions:

// Iterate over each .stats element...
var values = $('#channel1 .stats').map(function() {
  // Ensure that the text is parsed as a Number...
  return parseInt($(this).text(), 10) || 0;
}).get(); // Converts the elements to a native array
// Now sum up the values obtained above
var sum = values.reduce(function(prev, curr) {
    return prev + curr;
}, 0);
console.log(sum);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body" id="channel1">
    <div id="kanali1-a">
        <h4>Server 1*</h4>
        <span> IP: 85.93.88.146 Port: 8000</span> Listening: <span class="stats badge"></span>
        <br>
        <span>This is the main server for broadcasting</span>
    </div>

    <div id="kanali1-b">
        <h4>Server 2</h4>
        <span> IP: 85.93.88.146 Port: 8004</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-c">
        <h4>Server 3</h4>
        <span> IP: 85.93.88.146 Port: 8006</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-d">
        <h4>Server 4</h4>
        <span> IP: radio-pendimi.com (all-inkl) Port: 8000</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-e">
        <h4>Server 5</h4>
        <span> IP: 217.172.180.29 Port: 8000</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>

    <div id="kanali1-f">
        <h4>Server 6</h4>
        <span> IP: 217.172.180.29 Port: 8004</span> Listening: <span class="stats badge">10</span>
        <br>
        <span></span>
    </div>
</div>

Answer 5

Answer №3

Your code has a problem with

var statsCh1 = $('#channel1 .stats').text();

as it only retrieves the text from the first element in the jQuery collection, not all elements. This results in looping over a string instead of individual elements.

To correctly loop through the collection and read text from each element, you can use the 'each' method for a simple iteration:

var total = 0;
$("#channel1 .stats").map(function(){
    total += parseInt( $(this).text() ) || 0;
});
console.log(total);

Alternatively, you can utilize the 'map' and 'reduce' functions for a more sophisticated approach - though it involves additional looping:

var total = $("#channel1 .stats").map(function(){
   return parseInt($(this).text()) || 0;  
}).get()  
.reduce(  
    function (p, c) { return p + c;}, 0  
);
console.log(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body" id="channel1">
  <div id="kanali1-a">
    <h4>Serveri 1*</h4>
    <span> IP: 85.93.88.146 Porta: 8000</span>
    Duke degjuar: <span class="stats badge"></span>
    <br>
    <span>Ky eshte serveri kryesor ku behet transmetimi</span> 
  </div>

  <div id="kanali1-b">
    <h4>Serveri 2</h4>
    <span> IP: 85.93.88.146 Porta: 8004</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-c">
    <h4>Serveri 3</h4>
    <span> IP: 85.93.88.146 Porta: 8006</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-d">
    <h4>Serveri 4</h4>
    <span> IP: radio-pendimi.com (all-inkl) Porta: 8000</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-e">
    <h4>Serveri 5</h4>
    <span> IP: 217.172.180.29 Porta: 8000</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-f">
    <h4>Serveri 6</h4>
    <span> IP: 217.172.180.29 Porta: 8004</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>
</div>

Answer 6

Your code has a problem with

var statsCh1 = $('#channel1 .stats').text();

as it only retrieves the text from the first element in the jQuery collection, not all elements. This results in looping over a string instead of individual elements.

To correctly loop through the collection and read text from each element, you can use the 'each' method for a simple iteration:

var total = 0;
$("#channel1 .stats").map(function(){
    total += parseInt( $(this).text() ) || 0;
});
console.log(total);

Alternatively, you can utilize the 'map' and 'reduce' functions for a more sophisticated approach - though it involves additional looping:

var total = $("#channel1 .stats").map(function(){
   return parseInt($(this).text()) || 0;  
}).get()  
.reduce(  
    function (p, c) { return p + c;}, 0  
);
console.log(total);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body" id="channel1">
  <div id="kanali1-a">
    <h4>Serveri 1*</h4>
    <span> IP: 85.93.88.146 Porta: 8000</span>
    Duke degjuar: <span class="stats badge"></span>
    <br>
    <span>Ky eshte serveri kryesor ku behet transmetimi</span> 
  </div>

  <div id="kanali1-b">
    <h4>Serveri 2</h4>
    <span> IP: 85.93.88.146 Porta: 8004</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-c">
    <h4>Serveri 3</h4>
    <span> IP: 85.93.88.146 Porta: 8006</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-d">
    <h4>Serveri 4</h4>
    <span> IP: radio-pendimi.com (all-inkl) Porta: 8000</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-e">
    <h4>Serveri 5</h4>
    <span> IP: 217.172.180.29 Porta: 8000</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>

  <div id="kanali1-f">
    <h4>Serveri 6</h4>
    <span> IP: 217.172.180.29 Porta: 8004</span>
    Duke degjuar: <span class="stats badge">10</span>
    <br>
    <span></span> 
  </div>
</div>

Guide on calculating the total sum of numbers from multiple selected elements based on class within a div that has a designated id

Answer №1

Answer №2

Answer №3

Similar questions

I'm having trouble retrieving data from a nested object in React Native for iOS

What are the best techniques for effectively employing jQuery Deferred/promise in automatically invoked functions like .ajax()'s beforeSend()?

"Troubleshooting: Why is my AngularJS ng-click not triggering the function

Usage of double quotation marks in jquery formbuilder is not permitted

Unable to establish a WebSocket connection in Django channels due to connectivity issues

Convert the checkbox array into a CSV format

Troubleshooting: jQuery's clone( true ) function fails to function properly with dynamic

What is the best way to find the most commonly used category for a product in a MongoDB collection?

Converting HTML to PDF: Transform your web content into

Searching for text on a webpage without an identifier using C#

What is the best way to create a box-shadow with an inset effect and a touch of

Newly added rows to the table after filtering remain visible

How can I access a list in the code behind of an ASPX file and iterate through it using JavaScript in a foreach

What is the best way to establish a connection between two applications using React and Node

Creating a conditional statement within an array.map loop in Next.js

Stopping setinterval on click can be achieved by using the clearInterval function in

Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

Exploring the use of $ in the outcome of a json for jQuery autocomplete functionality

CORS response header is not included

JavaScript function to add or subtract