jquery abstractly adding up values of parent div's data values

Question

So I have several divs with the class "answers_total", and contained in it are five divs with a class "answer" and a data-answer attribute.

What I'm trying to do is somehow abstractly add up the total true values for each "answers_total" div and store them in a variable. So for the first one here there are three "true" and in the second only two "true". I'd need to be able to access each individual total, probably each have their own variable? I'm not 100 percent sure.

I think you'd do this with $(".answers_total").each...

but I'm not sure where to go after that. Any ideas on how to do something like this? Maybe it's not possible or there is a better way to set up and do this?

Thanks so much for any help

<div class="answers_total">
    <div data-answer="true" class="answer">SPEECH</div>
    <div data-answer="false" class="answer">RELIGION AND BELIEF</div>
    <div data-answer="true" class="answer">PRESS</div>
    <div data-answer="true" class="answer">ASSEMBLY</div>
    <div data-answer="false" class="answer">PETITION</div>
</div>
<div class="answers_total">
    <div data-answer="false" class="answer">SPEECH</div>
    <div data-answer="true" class="answer">RELIGION AND BELIEF</div>
    <div data-answer="false" class="answer">PRESS</div>
    <div data-answer="true" class="answer">ASSEMBLY</div>
    <div data-answer="false" class="answer">PETITION</div>
</div>

Answer 1

You can use jQuery.map() function to which returns an array.. then use the .length property to find out how many of those data-answer=true exists in each div.answers_total

var x = $('.answers_total').map(function(i,v){
    return $('div[data-answer=true]',v).length; // return how many have data-answer=true
});

so

x[0] = 3 // which is the relevant to the first .answers_total div
x[1] = 2 // which is the relevant to the second .answers_total div

FIDDLE

If you wanted count of both true and false count you can do

var x = $('.answers_total').map(function (i, v) {
    return {
        true: $('div[data-answer=true]', v).length,
        false: $('div[data-answer=false]', v).length
    };
});

then

x[0].true = 3 // number of true in first div
x[0].false = 2 // number of false in first div
x[1].true = 2 // number of true in second div
x[1].false= 3 // number of false in second div

FIDDLE

Answer 2

I'm not sure what you're looking to do with it after you're done, or what you mean by "abstract", but this should work:

var answerTotals = [];

$('.answers_total').each(function() {
    var results = { correct: 0, incorrect: 0 };
    $(this).find('.answer').each(function() {
        if ($(this).data('answer') == 'true')
            results.correct++;
        else
            results.incorrect++;
    });
    answerTotals.push(results);
});