Need help on constructing this jQuery

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!

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/

Try:

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

var grid0total = total('grid0'),
    grid1total = total('grid1');

See: http://jsfiddle.net/Au8Fr/

I'd give all grid divs one commmon class. Something like this:

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

Now you can easily count their values:

var count=0;
$(".grid").each(function(){
 count+=parseInt($(this).text())
})

You can loop through all of your grid0X divs like this:

var countOnes = 0;
$('div[id^=grid0]').each(function() {
    if ($(this).text() === "1") {
        ++countOnes;
    }
});

That finds all div elements whose ID starts with grid0 (so, grid00, grid01, etc.). The loop counts how many of them contain just the text "1", which is what I think you were after in your question; if not, the loop logic is easily manipulated.

Similarly, for grid1X, just change the selector to use 1 instead of 0.

Alternately, though, if these divs are in some kind of container, you could use a selector to find the container and then loop through its children, e.g.:

HTML:

<div id="grid0">
    <div>0</div>
    <div>0</div>
    <div>0</div>
    <div>1</div>
    <div>0</div>
    <div>0</div>
</div>

JavaScript:

$("#grid0 > div").each(...);

...and avoid having all those IDs.