Question

How do you loop through the results from a children() or each() call in jQuery when you want to work with some cumulative result? For example sum up numbers in checkboxes and change a class if they get over 100%. All the example seem to only perform logic that is independent for each iteration.

I’m looking for the javascript/jquery equiv of this c#

var x = new List<int> { 1, 2, 3 };
Console.WriteLine(x.All(y => y > 0));

This is what I have now, but it seems like there should be something cleaner.

var count = 0;
$(this).parent().children().each(
    function () {
        if ($(this).hasClass("selected")) {
            count++;
        }
    }
);

if ($(this).parent().children().length == count) {
    $(this).parent().parent().toggleClass("selected");
}
else {
    $(this).parent().parent().removeClass("selected");
}

Answer 1

Aside from the obvious iterate and sum approach, you can use the newer javascript iteration functions. Assuming you want so sum some numbers:

var sum = objects
    //convert to jquery selection of numbers
    .map(function() {return +$(this).val(); })
    //convert to javascript array
    .get() 
    //add together
    .reduce(function(a, b) { return a + b; });

---

For your example:

var checkboxes = $(this).parent().children()
var allSelected = checkboxes.map(function () {
    return $(this).hasClass("selected");
}).get().every(function(x) { return x; });

You can go one stage better by extending jQuery

$.fn.every = function(f) {
    return [].every.call(this, function(x) {
        return f.call(x);
    });
}

Leaving you with:

var checkboxes = $(this).parent().children()
var allSelected = checkboxes.every(function() {
    return $(this).hasClass("selected");
});