Need help on constructing this jQuery

Question

I am having a bunch of div tags in my html page. Now I need to write a jQuery to calculate the grid's value. In the below example I will be using grid0 as the base id and I want the count in that series which is 1 here.

<div id="grid00">0</div>
<div id="grid01">0</div>
<div id="grid02">0</div>
<div id="grid03">1</div>
<div id="grid04">0</div>
<div id="grid05">0</div>

In another example given below I will be using id's starting with grid1 and the total value is 6. Please guide me!

<div id="grid10">5</div>
<div id="grid11">0</div>
<div id="grid12">0</div>
<div id="grid13">1</div>
<div id="grid14">0</div>
<div id="grid15">0</div>

I tried this jQuery("div[id^='grid0']"). But this is giving me all the elements. But I need the count using the value inside them.

Thanks!

Answer 1

Start by selecting the divs with the starts-with selector and loop through the results and tally up the text values casted to integers.

---

function GetSum(prefix) {
    var sum = 0;
    $("div[id^='" + prefix + "']").each(function(){
        sum += parseInt($(this).text());
    });
    return sum;
}

var grid0Total = GetSum("grid0");
var grid1Total = GetSum("grid1");

---

Or if you wanted to take it a step further with a jQuery function:

jQuery.extend({
    gridSum: function(prefix) { 
        var sum = 0;
        if(!!prefix) { 
            $("div[id^='" + prefix + "']").each(function(){
                sum += parseInt($(this).text());
            });
        }
        return sum;
    }
});

then you could write:

var grid0Total = jQuery.gridSum("grid0");
var grid1Total = jQuery.gridSum("grid1");

---

You could also use the map() function like so:

var sum = 0;
$("div[id^='" + prefix + "']").map(function(){
    return sum += parseInt($(this).text());
});
return sum;

---

See them all in action here: http://jsfiddle.net/FpmFW/1/